viewport控制

当我们在做响应式设计时，关注最多的是CSS的

@media

查询。不可否认，

@media

查询完成了很多工作，但一个网站的响应能力还取决于对

viewport

的控制。当我们想根据屏幕尺寸来自动变化页面布局时，如下：

@media screen and (min-width:960px){
body{background-color:green;}
}
@media screen and (max-width:960px) and (min-width:500px){
body{background-color:pink;}
}
@media screen and (max-width:500px){
body{background-color:yellow}
}

在浏览器上调整窗口大小，可以完全适应网页的响应，但是在移动端浏览页面的时候就出现了异常，之所以会有这样的问题，是设备尺寸和

viewport

尺寸不一致导致的。为了更好的理解这两个尺寸之间的不同点，下面就简单说下：

设备像素：这个是物理层面的像素，比如一台iPhone6，是375*667像素

CSS

像素：这个是我们在

CSS

使用过程中的一个抽象单位，它并没有一个绝对的尺寸，页面上单个

CSS

像素的大小完全取决于

viewport

的大小

viewport

：

viewport

决定了页面的像素密度。比如一个宽750px的

viewport

，表示屏幕上横向排布了750个

CSS

像素

->

viewport

是无关设备的，它不知道也不关心我们的设备到底有多大的屏幕

大多数显示器的

viewport

尺寸默认在800px到1024px之间，这就解释了为什么之前为什么在电脑上可以正常显示

通过

meta

标签来控制

viewport

可以设置

meta

标签中的

viewport

信息，以此来解决

viewport

尺寸不匹配的问题

<meta name="viewport" content="key=value,key=value">

标签有四个关键字

1.

width

2.

height

3.

initial-scale

4.

minimum-scale

5.

maximum-scale

6.

user-scalable

width

可以用

width

来设置

viewport

的宽度，其代替那些不适合的默认宽度，我们可以给其设定一个固定的大小，但设定为

device-width

可以兼容不同大小的屏幕

<meta name="viewport" content="width=device-width">

initial-scale

在移动设备上，用户有时会需要缩放页面，当页面缩放的时候,

viewport

的像素尺寸也会相应的改变，但是css的像素尺寸不会改变

我们可以通过

initial-scale

来设置css像素与viewport像素之间的比例，通常情况下是1:1，这个参数的设置可以很好的解决

width=device-scale

设置所带来的问题。有些移动设备浏览器会在纵向模式时默认使用设备宽度，当切换到横向模式时页面显示就会不正常，也可以通过

initial-scale=1

来解决

<meta name="viewport" content="width=device-scale,initial-scale=1">

maximum-scale

这个是用户可以缩放页面的最大比例

minimum-scale

这个是用户可以缩放页面的最小比例

user-scalable

若设置了

user-scalable=no

,则用户无法对页面进行缩放

用CSS来控制

viewport

虽然现在很多人都在使用

viewport

，但其实

viewport

并不是HTML5标准中的正式成员。W3C目前正在研究将

viewport

以

@viewport

规则的形式加入到CSS中，

@viewport{
zoom:1.0;/*same as initial-scale=1*/
width:device-width;
}
@-ms-viewport
@-webkit-viewport
@-moz-viewport
@-o-viewport

总结：为了保证响应式页面能够在移动端可以正常运行，把下面这句话加到

head

元素中

<meta name="viewport" content="width=device-scale,initial-sacle=1">

转载自：https://segmentfault.com/a/1190000002685485