pc
端:
pc端中viewport
即为浏览器窗口的宽度。
viewport
的功能在于控制网站的最高块状(block
)容器:<html>
元素。 未设置<html>
宽度的情况下,<html>
的宽度即为viewport
的宽度。
获取viewport
的尺寸:
window.innerWidth/Height
包含滚动条
document. documentElement. clientWidth/Height
不包含滚动条
获取<html>
的尺寸:
document.documentElement.offsetWidth/Height
移动端重点:移动端的三种viewport
——虚拟viewport
——layoutviewport
、实际布局viewport
——visualviewport
以及移动设备适配viewport
——idealviewport
抽象:layoutviewport
是一张大的不能改变大小和角度的图片。而我们通过一个框visualviewport
来观察这张图片。
我们可以通过拿着这个框站得离大图片远点(用户的缩小页面功能),以一次性看到这个大图片。
或者你能站得近点(用户的放大页面功能)以看到一部分,而看到的这部分就是visualviewport
的区域——当前显示在屏幕上的内容。
<html>
的宽度继承与layoutviewport
,iPhone上的Safari使用980px、Opera 850px,安卓的Webkit核心800px,IE974px
用户可以滚动页面来改变可见部分,或者缩放浏览器来改变visualviewport
的尺寸,也就是改变我们能看到的内容大小
document.documentElement.clientWidth/Height
计算layoutviewport
的尺寸
window.innerWidth/Height
计算visualviewport
的尺寸
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
的解析:
假设你创建一个页面,并不为它赋值width。那么它会伸展开来占据100%的viewlayout的宽度
(默认:iPhone上的Safari使用980px、Opera 850px,安卓的Webkit核心800px,IE974px)。
绝大多数浏览器缩小这个页面以在一屏的宽度上显示这个layoutviewport。以致手机屏幕上显示的内容极小。
这时就可以通过该标签将<html>
的宽度设置为合适的大小,这个宽度就是idealviewport
的宽度。
分析:
width=device-width
:设备的屏幕宽度
user-scalable=no
:不允许用户手动缩放
minimum-scale
:允许用户的最小缩放值,为一个数字
maximum-scale
:允许用户的最大缩放值,为一个数字
initial-scale
:设置页面的初始缩放值,为一个数字
显而易见:ideal viewport并没有一个固定的尺寸,不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px,无论它的屏幕宽度是320还是640,也就是说,在iphone中,css中的320px就代表iphone屏幕的宽度sssssss。
参考自:
http://www.w3cplus.com/css/viewports.html © w3cplus.com
http://www.cnblogs.com/2050/p/3877280.html
像素的奥义
物理像素(pp)
物理像素又称为设备像素,是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度
设备独立像素(dip)
又称密度无关像素,可以看做是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素。
css像素(dips)
一个抽象单位,主要使用在浏览器中,用来精确度量web页面上的内容。一般情况下,css像素称为与设备无关的像素,简称dips
屏幕密度(ppi)
是指一个设备表面上存在的像素数量,以每英寸有多少像素来计算(ppi)
设备像素比(dpr)
定义了物理像素和设备独立像素的对应关系,公式:
设备像素比 = 物理像素 / 设备独立像素
对于设备像素比的解释
在不同的屏幕上,CSS像素所呈现的物理尺寸是一致的,而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素,而在Retina(设备像素dpr比为2)屏幕下,1个CSS像素对应的却是4个物理像素。