移动端布局基础viewport

时间:2022-05-16 06:08:36

划重点

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

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的效果。