移动端适配 — 细节补充（一）

2020-01-21 本文已影响0人西瓜鱼仔

1 meta标签到底做了什么事情

做过移动端适配的小伙伴一定有遇到过这行代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？不急，我们先往下面看，这里先留个悬念。

2. 几个专有名词和单位

这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。首先，先来看一下物理像素，以iphone 6为例，可知道：

分辨率：1334pt x 750pt指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。
屏幕尺寸：4.7in注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。
屏幕像素密度：326ppi指的是每英寸屏幕所拥有的像素数，在显示器中，dpi = ppi。dpi强调的是每英寸多少点。同时，屏幕像素密度 = 分辨率/屏幕尺寸

接着，我们来看一下其他的单位：

设备独立像素：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是，物理像素开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。
设备像素比：缩写简称dpr，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。设备像素比 = 设备像素 / css像素（垂直方向或水平方向），可以通过JS 来获取： window.devicePixelRatio。

3. PC和移动端不同的视口

注：以下涉及的像素均为CSS像素。并且默认不考虑缩放。

布局视口

写过css的小伙伴应该知道，我们在 html、 body设置width:100%;height:100%;的时候，它并不是无效的。我们都知道100%这种百分数应该是继承父元素而来的。但是在移动端，就大不一样了。以下的例子是在不加meta标签的前提下进行演示的：

假如我们现在做一个二八分的左右布局，那么如果在PC端上面的话，显示的效果非常完美，这没什么好说的。那如果是在手机端呢，这里以iphone 6为例子来讲解，图例如下：

代码如下：

* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
    width: 100%;
}
.left {
    float: left;
    width: 20%;
    height: 100%;
    background: red;
}
.right {
    float: right;
    width: 80%;
    height: 100%;
    background: green;
}
----
<body>
    <div class="left"></div>
    <div class="right"></div>
</body

这里我们会看到，为什么body的宽度是980px，而浏览器的宽度只有375px，那么这个980px到底是从哪里来的呢？
其实，这里的980px就是移动端所谓的布局视口了。

在移动端，默认的情况下，布局视口的宽度是要远远大于浏览器的宽度的。这两个视口不同于PC端，是相互独立存在的。

为什么呢？试想一下，如果一个网页不对移动端进行适配，用户进行阅读的时候，如果默认情况下布局视口的宽度等于浏览器宽度，那是不是展示起来更加的不友好。也就是说，如果一个div的宽度为20%，那么它在布局视口宽度为980px的时候，展示给用户的像素还有196px，而如果宽度只有375px的情况下，宽度只有 75px，展示的大小相差特别大。

所以，浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽度设置地很大，一般在 768px ~ 1024px之间，最常见的宽度是980px。这个宽度可以通过document.documentElement.clientWidth得到。

视觉视口

对于视觉视口来说，这个东西是呈现给用户的，它是用户看到网页区域内CSS像素的数量。由于用户可以自行进行缩放控制，所以这个视口并不是开发者需要重点关注的。

值得注意的是，在移动端缩放不会改变布局视口的宽度，当缩小的时候，屏幕覆盖的css像素变多，视觉视口变大，反之亦然。而在PC端，缩放对应布局宽度和视觉窗口宽度都是联动的。而浏览器宽度本身是固定的，无论怎么缩放都不受影响。

如果对上面的宽度还是很乱，那么这里有一个表格可以帮助你理清思路。以下表格横向都以浏览器窗口的宽度作为基准：
对于PC端来说

对于移动端来说

理想视口

以上，布局视口很明显对用户十分的不友好，完全忽略了手机本来的尺寸。所以苹果引入了理想视口的概念，它是对设备来说最理想的布局视口尺寸。理想视口中的网页用户最理想的宽度，用户进入页面的时候不需要缩放。
那么很明显，所谓的理想宽度就是屏幕的宽度了。所以就有了下面的这段代码：

<meta name="viewport" content="width=device-width">

然而，这段代码其实也并不完美，在IE浏览器中，由于横屏竖屏的切换会对其造成影响，为了解决这个兼容性的问题，最后再加上一句，就有了现在的：

<meta name="viewport" content="width=device-width,initial-scale=1">

width = device-width这句代码可以把布局视口设置成为屏幕的宽度。
initial-scale=1的意思是初始缩放的比例是1，使用它的时候，同时也会将布局视口的尺寸设置为缩放后的尺寸。而缩放的尺寸就是基于屏幕的宽度来的，也就起到了和width = device-width同样的效果。

另外，值得一提的是，我们在进行媒体查询的时候，查询的宽度值其实也是布局视口的宽度值。
相关链接：移动端适配 — 细节补充（二）

原文地址：https://blog.csdn.net/xiaxiaoxian/article/details/79395694