Viewport

什么是 Viewport?

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

设置 Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

Viewport


width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height:和 width 相对应,指定高度。

initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。

maximum-scale:允许用户缩放到的最大比例。

minimum-scale:允许用户缩放到的最小比例。

user-scalable:用户是否可以手动缩放。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 开发移动网页时,你一定会遇到下面这段代码: 在网页的 中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。其...
    gzgogo阅读 2,291评论 4 16
  • 原文地址 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewp...
    matthewm阅读 1,566评论 0 4
  • 感谢你,让我知道,有些话当讲有些话不当讲;而我,对不起你,因为你装逼的时候我只会在一旁静静地看着你装!
    想要太阳阅读 134评论 0 0
  • 米兰画阅读 192评论 0 0
  • 亲子日记第26篇2017年10月20日 星期五 晴 下午接孩子回家,到小区后看见小朋友们正在下面玩游戏,孩子...
    海内存知己_bd9e阅读 376评论 0 1