0基础学习移动端适配

这是关于移动端适配的第一篇文章，这篇文章主要介绍视口以及和视口有关的meta标签的使用。

不管三七二十一，我们先新建一个页面：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>这不是一个demo</title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            div{height: 100px; background: red;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

在谷歌浏览器下，我们可以看到不同手机的适配情况：

可以看出，不管是i5/i6/i6plus下，div的宽度都为980px，这个980是什么值，为什么它好像和移动设备无关？

其实这个980所表示的就是布局视口。
布局视口layout viewport ：就是移动设备上用来装载我们的网页的那一块区域。浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽度设置地很大，一般在 768px ~ 1024px之间。不同的设备有不同的宽度。最常见的宽度是980。下图是不同设备下布局视口的大小。

布局视口有980像素，可是我们的屏幕很小，按理说应该会有滚动条才是，可实际上并没有。这就需要归功于另一个视口：视觉视口。

视觉视口visual viewport：屏幕上显示的页面的一部分。听起来很玄乎，可是你认真看下面这张图，你就能明白视觉视口(visual viewport)和布局视口(layout viewport)的关系了：

此时，因为我们的视觉视口 = 布局视口，所以没有出现滚动条。虽说是没有滚动条，但是pc端能友好显示的页面，在移动端上就显示的很怪异。字体很小，很难看清。比如亲爱的百度：

如果想让字体大小可读，又该怎么办？在此之前，我们还需要了解另一个视口，理想视口。
理想视口ideal viewport：它提供了设备上理想网页的大小。这个值可以在不同设备的理想视口查到。常用的有：i5是320，i8是375，plus是414。

扯了那么多，那要如何适配呢？
相信一定会有一些前辈，他们苦口婆心地告诉你，你只要加这一行代码就可以了：

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

怀有好奇心的我们，勇敢地作出了尝试：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>这不是一个demo</title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            div{height: 100px; background: red;}
        </style>
    </head>
    <body>
        <div>hello world</div>
    </body>
</html>

得到了如下的效果：

字体在三大尺寸下，显示都算是友好，但是奇怪的是div的宽度不再是980，而是和设备的宽度有关。这一切，都得归功于我们刚刚加的width=device-width了。

width=device-width，这句代码的意思就是把布局视口 = 理想视口。那既然布局视口跟着变了，那刚刚的视觉视口又算咋回事啊，它现在的值等于多少？这不还有我们刚刚设置的另一个代码initial-scale=1.0，它的作用就是改变视觉视口的。

initial-scale指的是缩放系数。其中有这样的公式：

拿i5的机型来说，根据公式可得：
视觉视口宽度 = 320 / 1 = 320
布局视口宽度 = 320
所以：视觉视口宽度 = 布局视口宽度。页面无滚动条。

那如果我改变initial-scale的值会有什么反应呢，同样我以i5的机型做示范：

initial-scale = 0.5 「 div宽度640，页面无滚动条 」

initial-scale = 1 「 div宽度320，页面无滚动条 」

initial-scale = 1 「 div宽度320，页面有滚动条 」

现在我们好好来捋捋：

initial-scale = 0.5 「 div宽度640，页面无滚动条 」
视觉视口宽度 = 320 / 0.5 = 640
布局视口宽度 = 320
又因为：视觉视口不能大于布局视口，所以此时，将布局视口的宽度提高等于640
总结：视觉视口 = 布局视口 = 640

initial-scale = 1 「 div宽度320，页面无滚动条 」
视觉视口宽度 = 320 / 1 = 320
布局视口宽度 = 320
总结：视觉视口 = 布局视口 = 320

initial-scale = 2 「 div宽度320，页面有滚动条 」
视觉视口宽度 = 320 / 2 = 160
布局视口宽度 = 320
总结：视觉视口 < 布局视口 页面出现了滚动条。

最后总结：

页面是否出现滚动条，看布局视口和视觉视口的大小
页面元素的宽度取决于布局视口的大小

留个思考题：为什么在未设置<meta>的情况下，页面无滚动条，浏览器做了哪些默认的设置？

参考：

ppk大神讲解视口第一篇
ppk大神讲解视口第二篇
ppk大神讲解视口第三篇