移动WEB开发之viewport

问题：

在codepen上写了一个响应式页面，调试的时候没有问题。结果放到网站上，在手机上打开以后居然和在电脑中的布局是同样的。

       

 

查阅资料以后知道响应式布局应该有这样一句话：<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

这是怎么回事呢？为何写了width=device-width以后就能够正确的显示为图二那样呢？

 

Viewport诞生

这件事情要从viewport出现以前开始讲起。

在移动设备还不普及的时候，网页设计根本不考虑手机端的感觉，若是用手机设备（屏幕宽度为320px）打开一个定宽（width:980px）的网页，就会出现滚动条，要滑动才能看完整个页面：

 

这并非最糟糕的。最糟糕的是，若是是流式布局。也就是一个盒子的宽度是百分比，好比说20%，那么在一个屏幕宽度为320px的手机上打开以后，这个盒子的实际宽度就会是320px*20%=64px。而它里面的以px为单位的文字，依然是那么大。这就会出现一行中只能容下那么几个字的状况，阅读体验是很是差的。

 

为了解决这个问题，Apple提出了viewport这个概念，他就至关于创建在设备屏幕上的一个单独的视口，用于展现网页内容，让CSS与设备宽度彻底脱离关系。也就是说，在CSS中的百分比是由它的宽度来决定的，而不是由设备屏幕的物理宽度。Apple给它一个默认宽度，980px。

这也就是为何个人响应式网页在手机中打开后和在电脑上的布局相同了，由于我是在viewport中打开它，而viewport的宽度是980px，并无知足breakpoint，因此不会改变布局。

随着移动端的普及，这个问题就愈来愈棘手，那些专门为手机设计的网页（宽度为320px），在手机上打开以后倒是这样的：

 

因此须要提供一些属性，来设置viewport的宽度或高度。

<meda name="viewport" width="device-width">

这样，这个网页就能够正确的显示了：

 

参考：

• 什么是viewport，为啥须要viewport
• A pixel is not a pixel is not a pixel