移动端布局三种视口_移动端适配之视口和meta标签

这是关于移动端适配的第一篇文章，这篇文章主要介绍视口以及和视口有关的meta标签的使用。

不管三七二十一，我们先新建一个页面：

这不是一个demo

*{margin: 0; padding: 0;}

div{height: 100px; background: red;}

在谷歌浏览器下，我们可以看到不同手机的适配情况：

iPhone5下

图片描述

图片描述

可以看出，不管是i5/i6/i6plus下，div的宽度都为980px，这个980是什么值，为什么它好像和移动设备无关？

其实这个980所表示的就是布局视口。

布局视口layout viewport ：就是移动设备上用来装载我们的网页的那一块区域。浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽度设置地很大，一般在 768px ~ 1024px之间。不同的设备有不同的宽度。最常见的宽度是980。下图是不同设备下布局视口的大小。