Mr.RS的个人博客-前端架构&软实力复习-移动端适配

移动端适配的具体含义

为了在移动端让页面获得更好的显示效果，我们必须让**布局视口(宽度)=视觉视口(宽度)=理想视口(宽度)**。但一般情况下它们并不一致，因此我们需要一种方案 ~~(rem+vw)~~ 来让设计稿得到更完美的适配。

布局视口(layout viewport):当我们以百分比来之当一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。

所以，布局视口是网页布局的基准窗口，在PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包含滚动条、标签栏等）

在移动端，布局视口被赋予一个默认值，大部分是980px，这保证PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大

我们可以使用document.documentElement.clientWidth/clientWidth来获取布局视口的大小

视觉视口(visual viewport): 用户通过屏幕真是看到的区域

视觉视口默认等于当前浏览器的窗口大小（包括滚动条等）

当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小

例如：用户将浏览器窗口放大了200%，这时浏览器窗口中的CSS像素会随着视觉视口的放大而放大，这时一个CSS像素会跨域更多的物理像素

所以，布局视口会限制你的CSS布局，而视觉视口决定着用户具体能看到什么

我们可以使用window.innerWidth/innerHeight来获取视觉视口的大小

布局视口在移动端展示的效果并不是一个理想的效果，所以理想视口(ideal viewport)就诞生了：网页在移动端展示的理想大小=设备独立像素

当页面缩放比例为100%时，CSS像素=设备独立像素，理想视口=视觉视口

我们可以通过调用screen.width/height来获得理想视口的大小

meta元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

我们可以借助meta元素的viewport来帮助我们设置视口、缩放等，从而让移动端得到更好的展示效果

<meta name="viewport" content="with=device-width; initial-scale=1; maxomum-scale=1; minmum-scale=1; user-scale=no;"></meta>

device-width就是理想视口的宽度，with=device-width就相当于让布局视口等于理想视口

由于initial-scale = 理想视口宽度 / 视觉视口宽度，所以设置initial-scale=1就相当于让视觉视口等于理想视口

这时，1个CSS像素就等于一个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似

突然写不下去了，不同屏幕下应该显示不同的内容，屏幕大应该是显示更多的ui而不是更大的ui。等看到牛逼的文章再回来补充