移动端布局三种视口_移动端适配之视口和meta标签
生活随笔
收集整理的這篇文章主要介紹了
移动端布局三种视口_移动端适配之视口和meta标签
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這是關(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 大一java实训报告1500字_社会实践
- 下一篇: ios navigation的返回按钮长