写在前面
- 这里就跳过了文档申明知识的介绍了,这么好的机会还不用html5的,你还在等什么?
- 概念了解: device pixels and css pixels
- css像素: 浏览器使用的抽象单位,主要用来在网页上绘制内容
- 设备像素: 显示屏幕的最小物理单位,每个 dp 包含自己的颜色、亮度
- css 1px != device 1px
- 概念了解: screen size and window size
viewport
由来
由于手机屏幕相对桌面显示器要小很多,传统网页上的设计在手机上的体验会很糟糕,阅读性非常差。
为了让手机也能获得良好的网页浏览体验,Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话),用于创建一个虚拟窗口(layout viewport),这个虚拟窗口的分辨率接近于桌面显示器,Apple 将其定义为980px。然后将虚拟窗口映射到移动设备的屏幕上,按比例缩放并重新渲染网页。
划分
-
虚拟窗口(layout viewport)
移动浏览器默认情况下把 viewport 设置为一个比较宽的值(防止太窄而在可视区域中显示错乱)。该默认的 viewport 称为 layout viewport。
宽度可通过 Js 获取(基本所有设备都支持)document.documentElement.clientWidth document.documentElement.clientHeight
-
视觉窗口(visual viewport)
浏览器可视区域大小。可理解为手机物理屏幕。宽度可通过 Js 获取(不支持Android2, Opera Mini, UC8)
window.innerWidth window.innerHeight
-
ideal viewport
由Peter-Paul Koch提出的一种概念,一个完美适配移动设备的 viewport。理想状态是不需要用户缩放和横向滚动条就能正常查看,显示的文字大小合适,不区分分辨率,屏幕密度等。 -
meta viewport
移动端默认使用的是 layout viewport ,而我们想要达到类似 ideal viewport 的效果的话,可以通过 meta 标签来对 viewport 进行控制。移动开发中必出场的定义:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
用来实现 ideal viewport 的效果。
meta viewport 标签属性说明
width: 320 // 设置 layout viewport 的宽度,device-width 为设备宽度 height: 800 // 和 width 对应,一般很少用 initial-scale: 1 // 设置页面初始缩放值, minimum-scale: 1 // 允许用户的最小缩放值 maximum-scale: 1 // 允许用户的最大缩放值 user-scalable: yes/no // 是否允可以手动缩放
关于 meta viewport 的各属性还有很多有趣的知识点。视频中可以揭晓~
Tips
- device-width 查询的是设备像素
- 不同浏览器的默认 layout viewport 略有不同
- 事件坐标在移动端各种不兼容
- initial-scale 和 device-width 叠加才能兼容目前的移动设备viewport 匹配
- 缩放值越大,当前 viewport 的宽度就越小,但是,并不是所有设备都能支持 initial-scale=2 的
- 当前缩放值 = ideal viewport 宽度 / visual viewport 宽度
- 当设置宽度值冲突时,浏览器会选择最大值
参考文献
- Mozilla viewport
- Google Developers
- ppk - viewport1
- ppk - viewport2
- ppk - viewport3
- ppk 大神的视频,建议看看。