了解移动 web viewport 的知识,主要是为了切图时心中有数。本文主要围绕一个问题:切图时怎样设置 <meta name="viewport"> 相关参数?围绕这个问题对 viewport 展开讲解。
移动设备的 viewport 是指设备屏幕上能够显示网页的一块区域。
这块显示网页的区域可能比浏览器可视区域大,也可能比浏览器可视区域小,切图时也可以设置。默认情况,移动设备的 viewport 大于移动设备浏览器的可视区域,主要是为了在移动设备上能够显示 PC 端的页面。
移动设备浏览器会有一个默认的 viewport 值可能是 980px,1024px 或其他值,由设备定。
手机浏览器要显示 pc 页面默认做了两件事,先把页面渲染在 980px 的 layout viewport 中,然后通过缩放在手机屏幕上展示,让用户看到页面全貌。
但是移动端切图的时候我们不会用这个默认的 980px 来布局,主要是因为
* 宽度不可控制,不同系统不同设备的默认值 viewport 都可能不同
* 页面缩小版显式,交互不友好
* 链接不可点
* 有缩放,缩放后又有滚动,交互不友好。
而且用户缩放会引起 px 和 dp 对应关系发生变化,页面放大一倍,那么 CSS 中 1px 所代表的物理像素会增加一倍,页面缩小一倍,css 中 1px 所代表的物理像素会减少一倍。
所以用默认的 980px 布局是很不规范的,那么切图时为了排版正确,我们怎么做呢?我们会用到 <meta> 标签,下面一步步说。
1、layout viewport
浏览器默认的 viewport 叫 layout viewport,这个 layour viewport 可以通过 document.documentElement.clientWidth 来获取。(对前端切图来说很重要)
2、visual viewport
layout viewport 的宽度大于浏览器可视区域的宽度,还需要一个 viewport 代表浏览器可视区域的大小(对前端切图来说不是太重要),这个 viewport 叫 visual viewport。
visual viewport 的宽度可以通过 window.innerWidth 来获取。
3、ideal viewport
visual viewport 代表移动设备浏览器可视区域的宽度,layout view 为了显示 PC 端页面被设置的很大,现在移动端发展这么快速,还需要一个能完美适配移动设备的 viewport。这个完美适配的 viewport 中用户不需要缩放,不需要横向滚动条就能正常查看网站的所有内容。这个 ideal viewport 就是移动设备理想 viewport。
ideal viewport 的宽度等于移动设备的屏幕宽度。
移动端默认的 viewport 是 layout viewport,也就是那个比屏幕宽的 viewport,而切图时需要让这个默认的 layout viewport 变成 ideal viewport。这就是移动端开发中 <meta> 标签的作用。
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段 meta 重置 layout viewport 的宽度为设备宽度,让我们切图时在 ideal viewport 中完成,而不是用默认的 layout viewport 来切图。
meta viewport 标签首先是由苹果公司在其 safari 浏览器中引入的,目的就是解决移动设备的 viewport 问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对 meta viewport 的支持,事实也证明这个东西还是非常有用的。
在苹果的规范中,meta viewport 有 6 个属性 (暂且把 content 中的那些东西称为一个个属性和值),如下:
width | 设置 的宽度,为一个正整数,或字符串 "width-device" |
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数 |
minimum-scale | 允许用户的最小缩放值,为一个数字,可以带小数 |
maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数 |
height | 设置 的高度,这个属性对我们并不重要,很少使用 |
user-scalable | 是否允许用户进行缩放,值为 "no" 或 "yes", no 代表不允许,yes 代表允许 |
扩展阅读:
对于移动设备上的 viewport 的研究(,,)。
来源: http://www.cnblogs.com/starof/p/6100466.html