移動端的視口

默認視口（布局視口）

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

document.documentElement.clientWidth可以得到手機的寬度都是980px 復制代碼

約束視口

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

<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：約束視口是（設備視口）； initial-scale=1 默認視口縮放是原來的1倍； maximum-scale=1 表示允許縮放的最大視口是原來的1倍； minimum-scale=1 表示允許縮放的最小視口是原來的1倍； user-scalable=no 不允許用戶縮放內容。 復制代碼

此時每個手機的視口就發生了改變，基本上在320px-414px這個范圍內，這個就是約束視口，此時的約束視口也叫理想視口，為什么每個手機都有不同的約束視口呢？

因為，每個手機的真實分辨率都不同，想要在屏幕上將文字顯示成一樣大小，就只能通過設置不同的約束視口來實現了。

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

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

轉載于:https://juejin.im/post/5a4a44f2f265da431956a002

總結

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

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