PC端网页如何在手机端完整呈现及视口概念
- 把一个 电脑端的网页放在手机里，分两步：
（1）把网站放在虚拟容器中，虚拟容器的宽度是980px； （2）把这个虚拟容器放到手机中（手机的宽度指的是设备独立像素） 把980px的虚拟容器放到375的手机中，整个虚拟容器会被压缩。 2. 手机宽度： （1）手机的分辨率：指物理像素，指的是发光点 如iphone6是1334*750
（2）设备独立像素：人为规定的 如iphone6 375*667
（3）逻辑像素 css像素 div{width：300px；height:300px;} 在PC端，物理像素和逻辑像素是一一对应的。在手机端，11的设备独立像素对应22的物理像素 3. 把980px的虚拟容器放到375的手机中，整个虚拟容器会被压缩。如何让虚拟容器不被压缩呢？ 解决方案： 设置虚拟容器的宽度，这个虚拟容器称为视口，即设置视口的宽度。 如果视口宽度设置成和手机设备独立像素宽度相同，就不会被压缩了。 例如： 一个200*200的盒子，放到手机里，分两个步骤： 1）先放到虚拟容器中，虚拟容器的宽度我们设置成和手机一样，也是375px 2）把这个375px的虚拟容器放到375的手机中，就不会被压缩了
具体代码实现
<meta name="viewport" content="width=device-width,initial-scale=1">
其中width=device-width用来设置视口宽度，device-width得到手机的设备独立像素
