meta标签到底做了什么事情
做过移动端适配的小伙伴一定有遇到过这行代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？
不急，我们先往下面看，这里先留个悬念。
几个专有名词和单位
这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。
首先，先来看一下物理像素。
以iphone6为例，可知道：
分辨率：1334pt x 750pt
指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。
屏幕尺寸：4.7in
注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。
屏幕像素密度：326ppi
指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时，屏幕像素密度=分辨率/屏幕尺寸
接着，我们来看一下其他的单位。
设备独立像素：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是，物理像素开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。
设备像素比：缩写简称dpr，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。设备像素比 = 设备像素 / css像素（垂直方向或水平方向）。可以通过JS来获取：window.devicePixelRatio
PC和移动端不同的视口
注：以下涉及的像素均为CSS像素。并且默认不考虑缩放。
布局视口
写过css的小伙伴应该知道，我们在html、body设置width:100%;height:100%;的时候，它并不是无效的。我们都知道100%这种百分数应该是继承父元素而来的。那在这里是继承哪里的呢？
在PC浏览器中，有一个用来约束CSS布局视口的东西，又叫做初始包含块。这也就是所有宽高继承的由来。除去margin、padding，布局视口和浏览器可视窗口宽度是一致的，同时也和浏览器本身的宽度一致。
但是在移动端，就大不一样了。
以下的例子是在不加meta标签的前提下进行演示的。
假如我们现在做一个二八分的左右布局，那么如果在PC端上面的话，显示的效果非常完美，这没什么好说的。
那如果是在手机端呢，这里以iphone6为例子来讲解：

预测未来最好的方法就是去创造未来。