总结

视口总结

---

虚拟容器

手机在出厂时已经设置好容器宽度。iOS, Android 基本都是 980px
        如果电脑端的网站整体的宽度也是980px，就会正好放到这个虚拟容器。

pc上的网页基本都能在手机端显示，但是可能需要手动缩放调整大小。

如果手机的宽度小于虚拟容器的大小，那么虚拟容器会被压缩，并且容器内的所有元素都将会被压缩。

        

---

视口：

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。

---

物理像素：
    指的是设备屏幕的物理像素，任何设备的物理像素数量都是固定的。

逻辑像素：
    通过css代码规定的像素大小，例如

.box{
        width:100px,
        height:100px;
    }

---

可以通过代码查看视口大小

document.documentElement.clientHeight
document.documentElement.clientWidth

---

三个视口：

布局视口（Layout Viewport）

         一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport）

视觉视口（Visual Viewport）

         视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。

理想视口（Ideal Viewport）

         布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。

将盒子放入手机的步骤：

将盒子先放在虚拟容器中，再将虚拟容器压缩放在手机中

由于不同手机的大小不同，所以各个盒子在不同手机中大小不同

---

结论：如果不想让盒子被压缩，你需要设置虚拟容器的大小。如果设置成和手机的宽度一样的，这样，这个盒子在所有的手机都不会压缩了。

---