移动端适配时对meta name=“viewport“ content=“width=device-width,initial-scale=1.0“的理解

viewport的概念
viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。

content属性值

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。
width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度。
initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。
maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制。值的范围为0.25~10.0之间
user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。

整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。这个device-width的计算公式为：设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio。

devicePixelRatio称为设备像素比，每款设备的devicePixelRatio都是已知，并且不变的，目前高清屏，普遍都是2，不过还有更高的，比如2.5, 3 等。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置：

css中的1px并不等于设备的1px
在css中我们一般使用px作为单位，在pc浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。

在为pc浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。后来，不同设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于这点，在文章后面的部分还会讲到。

在移动端浏览器中以及某些桌面浏览器中，**window对象有一个devicePixelRatio属性（设备像素比），它的官方的定义为：设备分辨率和设备独立像素的比例，也就是 devicePixelRatio = 设备的物理像素（分辨率） / 独立像素（实际css中像素）。独立像素也就是设备的宽度（device-width），device-width = 设备分辨率/devicePixelRatio(设备像素比) **。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。

移动端适配时对meta name=“viewport“ content=“width=device-width,initial-scale=1.0“的理解相关推荐

关于meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sc..
网页源代码中有时候会遇到这样的一段代码: <metaname="viewport"content="width=device-width, initial-scal ...
关于＜meta name=“viewport“ content=“width=device-width,initial-scake=1.0, maximum-scale=1.0,user-s..“＞
网页源码中有时会遇到这样的一段代码: <metaname="viewport"content="width=device-width, initial-scale= ...
meta name=viewport content=width=device-width,initial-scale=1.0 究竟什么意思
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释 <meta ...
head中meta name=viewport content=width=device-width,initical-scale=1的作用
<meta name="viewport" content="width=device-width,initical-scale=1"的作用> co ...
meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0/
网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放. <meta name="viewport" conten ...
＜ meta name=“viewport“ content=“width=device-width, initial-scale=1.0“＞的解释
< meta name="viewport" content="width=device-width, initial-scale=1.0"> me ...
html - meta name=viewport content=XX/ 标签常见属性及说明
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
关于meta name=viewport content=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalabl...
网页源代码中有时候会遇到这样的一段代码: <meta name="viewport" content="width=device-width, initial-sc ...
meta name=viewport content=width=device-width, initial-scale=1.0, user-scalable=no, minimum-scal
触摸屏设备IOS.Android等对网站meta的定义,经常用的时候就是复制下面几行代码... <meta http-equiv="Content-Type" content ...

移动端适配时对meta name=“viewport“ content=“width=device-width,initial-scale=1.0“的理解

移动端适配时对meta name=“viewport“ content=“width=device-width,initial-scale=1.0“的理解相关推荐

最新文章

热门文章