码迷,mamicode.com
首页 > 其他好文 > 详细

viewport

时间:2016-08-23 21:46:57      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:

知道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 的各种属性

mamevalue
width 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"  
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数  
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数  
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数  
height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用  
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

 

viewport

标签:

原文地址:http://www.cnblogs.com/fnncat/p/5800773.html

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