标签:
知道viewport是响应式时候用的,写web页面的时候,顺手就加上了。
今天认真看了看 ,
<meta name="viewport" content="width=1200, minimum-scale=0.25, maximum-scale=1.0, user-scalable=yes"/>
究竟是什么。
一,首先 移动端的像素和pc端的像素不一样哈
pc端浏览器,css中的一个像素和屏幕物理的像素是一一对应的
而在 移动端,css中的一个像素对应多少物理像素就不一定了
如果移动端分辨率越高 ,那么一个css像素对应更多的物理像素/
二,三个viewport理论
layout viewport :真实的,大于可见区域的
visual viewport :可见
ideal viewport:无论在何种分辨率的屏幕下,那些针对ideal viewport 而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户。
三,viewport 的各种属性
mame | value | |
---|---|---|
width | 设置layout viewport 的宽度,为一个正整数,或字符串"width-device" | |
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数 | |
minimum-scale | 允许用户的最小缩放值,为一个数字,可以带小数 | |
maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数 | |
height | 设置layout viewport 的高度,这个属性对我们并不重要,很少使用 | |
user-scalable | 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 |
标签:
原文地址:http://www.cnblogs.com/fnncat/p/5800773.html