這是關(guān)于移動(dòng)端適配的第一篇文章，這篇文章主要介紹視口以及和視口有關(guān)的meta標(biāo)簽的使用。

不管三七二十一，我們先新建一個(gè)頁(yè)面：

這不是一個(gè)demo

*{margin: 0; padding: 0;}

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

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

iPhone5下

圖片描述

圖片描述

可以看出，不管是i5/i6/i6plus下，div的寬度都為980px，這個(gè)980是什么值，為什么它好像和移動(dòng)設(shè)備無(wú)關(guān)？

其實(shí)這個(gè)980所表示的就是布局視口。

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

3

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。