码迷,mamicode.com
首页 > 移动开发 > 详细

移动端布局基础viewport

时间:2019-11-29 11:03:22      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:mini   maximum   idea   idt   content   开发   移动   文字   总结   

划重点

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

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

移动端布局基础viewport

标签:mini   maximum   idea   idt   content   开发   移动   文字   总结   

原文地址:https://www.cnblogs.com/jlfw/p/11956070.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!