初识视口-概念小结

概念

• 在移动端Web开发时，视口时一个非常重要的概念。最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。
• 在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。
• 在移动端，涉及到三个视口：布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）。

移动端三种视口

视觉视口（Visual Viewport）

顾名思义，视觉视口与用户当前所看到的网页区域有关，用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。

布局视口（Layout Viewport）

• 一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。布局视口可以看作一个虚拟容器；
• 当PC端的网站放到手机端，由于布局视口默认设置为980px，如果手机的宽度也是980，正好把这个虚拟容器放下。
  不幸的是，手机的宽度在出厂时，也是设置死的。如iphone6/7/8宽度是375px(物理像素),当把980px的虚拟容器放入375px的手机中时，这个虚拟容器就会被压缩，页面上的每一个盒子也会被压缩，这也是元素看上去很小的原因。
• 为了不让盒子放到手机里被压缩，可以设置这个虚拟容器的宽度，即设置布局视口。

理想视口（ ideal viewport）

因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport(理想视口)

即理想视口是布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。

关于像素

基本概念

像素是计算机屏幕中显示特定颜色的最小区域。屏幕中的像素越多，同一范围内能看到的内容就越多。或者说，当设备尺寸相同时，像素越密集，画面就越精细。

物理像素

物理像素：指的是手机或电脑屏上的发光点。叫物理分辨率，也叫物理像素。任何设备的物理像素数量都是固定的。

CSS像素

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。
它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。

参考博客：
作者：Sun____
链接：https://www.jianshu.com/p/7c5fdf90c0ef
来源：简书
作者： yuduxyz
链接：https://www.cnblogs.com/yuduxyz/p/9745962.html
来源：博客园