這是關于移動端適配的第一篇文章，這篇文章主要介紹視口以及和視口有關的meta標簽的使用。

不管三七二十一，我們先新建一個頁面：

這不是一個demo

*{margin: 0; padding: 0;}

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

在谷歌瀏覽器下，我們可以看到不同手機的適配情況：

iPhone5下

圖片描述

圖片描述

可以看出，不管是i5/i6/i6plus下，div的寬度都為980px，這個980是什么值，為什么它好像和移動設備無關？

其實這個980所表示的就是布局視口。

布局視口layout viewport ：就是移動設備上用來裝載我們的網頁的那一塊區域。瀏覽器廠商為了讓用戶在小屏幕下網頁也能夠顯示地很好，所以把布局視口寬度設置地很大，一般在 768px ~ 1024px之間。不同的設備有不同的寬度。最常見的寬度是980。下圖是不同設備下布局視口的大小。

3

總結

以上是生活随笔為你收集整理的移动端布局三种视口_移动端适配之视口和meta标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。