viewport是什么?
设备屏幕上能用来显示网页的哪一块区域。具体点说 ,就是浏览器或APP的webview用来显示网页的那部分区域。
css中的像素与设备的物理像素
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。在移动设备上,必须明白这点。安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五花八门,安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不同,没有一个定论。用户缩放也会引起css中px的变化。
在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。但是要注意的是,devicePixelRatio在不同的浏览器中还存在些许的兼容性问题。
三个viewport
layout viewport 是网页的全部内容,它可以全部或部分的展示给客户。layout viewport 的宽度一般是大于浏览器可视区域的宽度的。可通过document.documentElement.clientWidth获取。IE浏览器是通过document.body.clientWidth获取。
visual viewport 就是当前显示给用户内容的窗口,你可以拖动或者放大缩小网页。
ideal viewport: 移动设备的理想viewport。
meta标签对viewport进行控制
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0 user-scalable=0">
属性名 备注
width 设置layout viewport 的宽度,为一个正整数,使用字符串”width-device”表示设备宽度
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 允许用户的最小缩放值,为一个数字,可以带小数
height 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许 也可用”0”和”1”表示
target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个(安卓特有)