正文

移动web开发之入门&视口(代码片段)

黑马程序员官方  黑马程序员官方  2022-12-03  446

关键词：

一、移动端基础

1.1 浏览器现状

PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手

机操作系统都是基于Android修改开发的一样。

总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可

1.2 手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重。

Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。

近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。

作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px

1.3 常见移动端屏幕尺寸

1.4 移动端调试方法

Chrome DevTools（谷歌浏览器）的模拟手机调试

搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器

使用外网服务器，直接IP或域名访问

1.5 总结

移动端浏览器我们主要对webkit内核进行兼容
我们现在开发的移动端主要针对手机端开发
现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
学会用谷歌浏览器模拟手机界面以及调试

二、视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

2.1 布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元

素看上去很小，一般默认可以通过手动缩放网页

2.2 视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

2.3 理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口，对设备来讲，是最理想的视口尺寸

需要手动添写meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布

局的视口就多宽

2.4 总结

视口就是浏览器显示页面内容的屏幕区域

视口分为布局视口、视觉视口和理想视口

我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽

想要理想视口，我们需要给我们的移动端页面添加 meta视口标签

2.5 meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2.6 标准的viewport设置

视口宽度和设备保持一致

视口的默认缩放比例1.0

不允许用户自行缩放

最大允许的缩放比例1.0

最小允许的缩放比例1.0

三、往期笔记回顾

2022年前端学习路线图：课程、源码、笔记，技术栈
欢迎小伙伴们留言哦，期待看到大家的进步。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。

入门响应式web？看懂这篇文章就够了！——web前端系列学习笔记(代码片段)

...在响应式设计中是一个非常重要的概念。视口的概念针对移动端浏览器，分为两种视口，查看详情

［cordova之入门篇］(代码片段)

1.cordova是什么ApacheCordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 2.为什么用cordova基于webView将网页嵌入到原生应用中以实现跨平台。不必在多个平台上分别进行原生应用的开发，... 查看详情

移动开发(代码片段)

移动端浏览器主要针对webkit内核进行兼容视口viewport浏览器显示页面内容的屏幕区域。可分为布局视口、视觉视口、理想视口。布局视口layoutviewportiOS、Android将这个布局视口分辨率一般设置为980px视觉视口visualviewport用户... 查看详情

web前端之移动端课程开发之06.bootstrap(代码片段)

...平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情

web前端之移动端课程开发之06.bootstrap(代码片段)

...平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情

移动web开发之响应式布局(代码片段)

文章目录一、响应式开发原理1.1响应式开发原理1.2响应式布局容器二、bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3bootstrap布局容器2.4bootstrap栅格系统总结一、响应式开发原理1.1响应式开发原理就是使用媒体查询针对不同宽度的设... 查看详情

移动端web开发基础知识(代码片段)

文章目录移动端Web开发移动端基础浏览器视口样式编写分辨率和设备像素比二倍图SVG矢量图移动端Web开发移动Web开发的两种主流方案，一种是单独制作移动端页面，另一种是制作响应式页面移动端页面：单独制作移动... 查看详情

移动web开发之less基础(代码片段)

今天学习less基础相关内容。本篇目录一、维护css弊端二、less介绍三、Less安装（注意如果使用vscode不需要安装less）Less使用3.1Less变量3.2Less编译3.3Less嵌套3.4Less运算一、维护css弊端CSS是一门非程序式语言，没有变量、函... 查看详情

移动web开发之rem基础&媒体查询(代码片段)

前端干货内容在黑马，本篇目录：一、rem基础1.1 rem单位二、媒体查询2.1什么是媒体查询2.2语法规范mediatype查询类型2.3案例：根据页面宽度改变背景变色2.4媒体查询+rem实现元素动态大小变2.5引入资源（理解࿰... 查看详情

移动web开发之flex布局(代码片段)

...与flex布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持建议：1.如果是PC... 查看详情

移动web开发之flex布局(代码片段)

移动端布局学习之流式布局1(代码片段)

1.移动端基础1.1浏览器现状国内的UC和QQ百度等手机浏览器都是根据Webkit修改过来的内核，国内目前尚无自主研发的内核，就像国内的手机系统基本上都是局域安卓修改开发的一样.意思就是:兼容移动端主流浏览器处理Webkit内核浏... 查看详情

移动web开发之rem适配布局(代码片段)

引入1.页面布局文字能否随着屏幕大小变化而变化2.流式布局和flex布局主要针对宽度布局，那高度如何设置3.怎样让屏幕发生变化的时候元素高度和宽度等比例缩放1.rem基础rem单位rem(rootem)是一个相对单位，类似于em，em... 查看详情

vue之移动端viewport-vw适配(代码片段)

...取值为 vw 和 vh 中较大的那个vmin可以照顾移动端（手机端）横屏和竖屏的显示效果，保证移动开发中屏幕旋转之后的尺寸不变vw横屏：显示效果不好vmin横屏：显示效果好，项目需要横屏的时候，可以采用v... 查看详情

移动web基础(代码片段)

初始缩小：布局视口大于视觉视口初始放大：布局视口小于视觉视口布局视口等于视觉视口（这种动作行为叫做理想视口）<metaname="viewport"content="width=375"/><metaname="viewport"co... 查看详情

移动web

1.移动WEB1.1移动端浏览器现在移动端使用最多的浏览器内核为webkit,所以相对电脑端来说,移动端的前端开发更加方便.但是不同于电脑端,移动端的分辨率却是一个比较重要的部分.1.2移动WEB开发注意在移动端,我们需要注意一个视口... 查看详情

移动web开发之flex布局附携程网首页案例制作(代码片段)

本篇目录一、flex布局体验传统布局1.1flex弹性布局：建议：1.2初体验二、flex布局原理2.1布局原理三、flex布局父项常见属性3.1常见父项属性3.2flex-direction3.3 justify-content设置主轴上的子元素排列方式3.4flex-wrap设置子元素是否... 查看详情

6.0移动端页面布局(代码片段)

移动端app分类1、NativeApp原生app手机应用程序使用原生的语言开发的手机应用，Android系统用的是java，iOS系统用的是object-C2、HybridApp混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用3、WebApp基于Web的app手机... 查看详情