移动端的视口

移动端的视口

默认视口（布局视口）

每个手机都有自己真实的分辨率，但是如果直接用物理像素显示到手机上，那页面就没法看了。所以手机厂商在出厂的时候，给买个手机都设置了一个默认视口，由乔布斯提出的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