移动端布局基础viewport

Posted 2020-11-28 jlfw

划重点

手机屏幕相对着桌面浏览器小，传统网页的设计在手机上体验糟糕

Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话)，用于创建一个虚拟窗口（layout viewport），这个虚拟窗口的分辨率接近于桌面显示器，Apple将其定义为980px。然后将虚拟窗口映射到移动设备的屏幕上，按比例缩放并重新渲染网页。

---

虚拟窗口layout viewport

• 移动浏览器默认情况下把 viewport 设置为一个比较宽的值（防止太窄而在可视区域中显示错乱）。该默认的 viewport 称为
  layout viewport。宽度可通过 Js 获取(基本所有设备都支持)

document.documentElement.clientWidth

视觉窗口visual viewport

• 浏览器可视区域大小。可理解为手机物理屏幕。宽度可通过 Js 获取(不支持android2, Opera Mini, UC8)

ideal viewport

• 一个完美适配移动设备的 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 标签的设置让layout viewport 达到ideal viewport的效果。