移動端的視口

默認(rèn)視口（布局視口）

每個(gè)手機(jī)都有自己真實(shí)的分辨率，但是如果直接用物理像素顯示到手機(jī)上，那頁面就沒法看了。所以手機(jī)廠商在出廠的時(shí)候，給買個(gè)手機(jī)都設(shè)置了一個(gè)默認(rèn)視口，由喬布斯提出的980px。

document.documentElement.clientWidth可以得到手機(jī)的寬度都是980px 復(fù)制代碼

約束視口

但是，手機(jī)又不是用980px來呈遞頁面的，在寫移動端頁面時(shí)，我們都會加上這句話

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no, viewport-fit=cover">viewport： 表示視口； width = device-width：約束視口是（設(shè)備視口）； initial-scale=1 默認(rèn)視口縮放是原來的1倍； maximum-scale=1 表示允許縮放的最大視口是原來的1倍； minimum-scale=1 表示允許縮放的最小視口是原來的1倍； user-scalable=no 不允許用戶縮放內(nèi)容。 復(fù)制代碼

此時(shí)每個(gè)手機(jī)的視口就發(fā)生了改變，基本上在320px-414px這個(gè)范圍內(nèi)，這個(gè)就是約束視口，此時(shí)的約束視口也叫理想視口，為什么每個(gè)手機(jī)都有不同的約束視口呢？

因?yàn)?#xff0c;每個(gè)手機(jī)的真實(shí)分辨率都不同，想要在屏幕上將文字顯示成一樣大小，就只能通過設(shè)置不同的約束視口來實(shí)現(xiàn)了。

例如：iPhone6s的分辨率是1334??750px，小米MIX2的分辨率是2160??1080px，那么要呈現(xiàn)20px的文字，如果都是320px的視口，那么iPhone需要83.4px的真實(shí)物理分辨率來顯示20px的文字，小米則需要135px的真實(shí)分辨率顯示，結(jié)果就是小米顯示的字會比iPhone大。

那么想要呈現(xiàn)同樣大小的文字，就只能改變小米的約束視口為518px，這樣在手機(jī)上顯示的文字就一樣大了，所以不同的手機(jī)會有不同的約束視口。

轉(zhuǎn)載于:https://juejin.im/post/5a4a44f2f265da431956a002

總結(jié)

以上是生活随笔為你收集整理的移动端的视口的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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