移动端开发目前主要包括三类:
- 原生 APP 开发:IOS、Android、Flutter、uniapp、ReactNative 等。
- 小程序开发:原生小程序、Taro、uniapp 等。
- Web 页面:移动端的 Web 页面,可以使用移动端浏览器或者 webview 浏览。
与移动 Web相对应的是运行在 PC 端浏览器上的 PC Web。
自适应:根据不同的屏幕大小自动调整元素的大小。
响应式:
基本概念:
像素(物理像素 physical pixel、设备像素 device pixel / dp):
像素(物理像素、设备像素):屏幕其实是由一个一个的点排列组成的,一个点就对应了一个由红绿蓝三色组成的小正方形,多个点通过不同的明暗对比就显示出了不同的图像。一个点就是一个像素。
不同的手机,每个像素的尺寸大小可能是不一样的。
CSS 像素(逻辑像素 logical pixel、设备独立像素 device independent pixel / dip):
CSS 像素(逻辑像素、设备独立像素):在实际开发 CSS 样式代码中使用的像素。
即使不同的手机,每个 CSS 像素的大小显示也是相同的。
物理像素是客观存在的, CSS 像素是人为创造出来为了方便在实际开发中使用的。
物理像素是没办法改变大小的,缩放操作改变的是 CSS 像素。
具体一个 CSS 像素对应多少个物理像素,是由系统去判断的。CSS 像素会自动换算成对应的物理像素。
分辨率:
分辨率:屏幕纵横向上的像素个数。例如:1792 * 828
的分辨率,就表示纵向有 1792 个像素,横向有 828 个像素,一共有 1792 * 828
个像素。
通过
screen.width
和screen.height
可以获取到屏幕的逻辑分辨率。
屏幕尺寸一样的情况下,分辨率越高,单个像素尺寸就越小,显示的图像就越细腻。
设备像素比(device pixel ratio / dpr):
设备像素比:在一个方向上,没有缩放的情况下,物理像素和 CSS 像素的比值。
通过
window.devicePixelRatio
可以获取到屏幕的 dpr 值。
屏幕尺寸一样的情况下,分辨率越高,单个像素尺寸就越小,设备像素比就越大,显示的图像就越细腻。
每英寸像素(pixels per inch/ppi):
每一英寸上的像素数,通常用来表示一个图像或者显示器上的像素密度。
viewport 视口:
图一中,用黑色边框来代表手机。边框内部是屏幕,即可视区域。页面是专门为 PC 端设计的,因此宽度很宽,超出了手机的可视范围。页面只有落在可视区域内才能被看见,超出的部分都是看不见的,如图二。因此,在有视口之前,想要通过手机来访问专门为 PC 端设计的页面,只能看到页面的一部分,想要看到其他的部分需要拖动滚动条。
需要通过移动端设备来访问专门为 PC 端开发的网页,并且想要让网页在移动端设备中能完整地显示,才有了视口这个概念。
在 PC 端的页面中,是不需要对视口进行区分的,视觉视口和布局视口是同一个,就是浏览器的可视区域。
视口是专门为了移动 Web 开发所设计的,和 PC Web 开发没有关系。
position: fixed
就是相对于视口来进行定位的。
视口的类型:
在移动端有 3 种视口:布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)。
-
布局视口:移动端设备的浏览器定义了一个虚拟的布局视口,默认宽度为 980px。页面是在布局视口中布局的。
可以使用
document.documentElement.clientWidth
或者document.documentElement.getBoundingClientRect().width
来获取布局视口的宽度。也就是说,通过手机浏览器来访问一个页面,在页面中定义的元素,默认是在 980px 宽度的视口中进行布局的。
但手机实际的屏幕是小于 980px 的,最终还会对其进行一定比例的缩小。
因此,使用默认的布局视口是不适合进行移动端布局的。在没有设置视口的情况下,通过移动端设备来访问专门为 PC 端设计的页面,移动设备会将页面视为具有固定宽度的 PC 页面,并将其等比例缩小以适应屏幕宽度。导致元素很小,看不清楚。
在设置视口的情况下,通过移动端设备来访问专门为 PC 端设计的页面,默认会有一个 980px 宽度的虚拟的布局视口,会在这个视口中来布局一个页面的内容,由于这个视口还是比屏幕的宽度宽,为了可以完整地显示,会自动对整个页面进行等比例缩小以适应屏幕大小。但缩小的比例就很小了。
-
视觉视口:可视区域,即手机屏幕的大小。
可以使用
screen.width
来获取视觉视口的宽度,但是有兼容性问题,有时候获取到的可能是屏幕的分辨率,因此不推荐使用。用户可以通过缩放操作视觉视口,不会影响布局视口。
-
理想视口:是指对设备来讲最理想的视口尺寸,当布局视口等于视觉视口时,就是最理想的状态,可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。
理想视口最大的作用就是不需要再缩小页面来适应屏幕大小了,因为布局视口就等于视觉视口。
设置视口:
通过 meta 标签,将 name 设置为 viewport,具体的内容在 content 中设置。
// 这是针对移动端的设置,和 PC 端没有关系,不会生效
// 设置布局视口的宽度等于视觉视口,此时就达到了理想视口。在实际开发中,都会这样做,也就是让页面在等于视觉视口的布局视口中进行布局,就不会再缩小页面来 适应屏幕大小了
<meta name='viewport' content='width=device-wdith, initial-scale=1, user-scalabe=no, maximum-scale=1.0, minimum-scale=1.0' />
- width:布局视口的宽度,属性值是正整数或者
device-wdith
。 - height:布局视口的高度,属性值是正整数或者
device-height
。目前还未被任何浏览器使用。 user-scalabe
:用户是否可缩放页面,属性值是 yes 或者 no。有些浏览器会忽略此规则,可以结合使用maximum-scale=1.0
和minimum-scale=1.0
来实现。initial-scale
:页面初始缩放比例,属性值是 0.0 到 10.0 之间的正数。maximum-scale
:页面最大缩放比例,属性值是 0.0 到 10.0 之间的正数。minimum-scale
:页面最小缩放比例,属性值是 0.0 到 10.0 之间的正数。
真机查看:
- 首先需要确保手机和电脑连接的是同一局域网。
- 通过本地服务器打开想要查看的页面。
- 通过 ipconfig 查询 IP 地址,替换掉页面地址中的域名。
- 关闭电脑防火墙。
- 在移动设备的浏览器中访问相应的网址即可查看。