浏览器 viewport 视口解析

viewport 视口解析

本篇文章我们来聊一下 viewport （视口）， viewport 就是浏览器可以用来显示页面内容的屏幕区域。
桌面上视口宽度等于浏览器宽度，但在手机上有所不同。这里涉及三个视口：

• 布局视口：手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。

• 视觉视口：用户正在看到的网站的区域，与设备屏幕一样宽。

• 理想视口：当网站是为手机准备的时候使用。使用 meta 生命。早期 iphone 理想视口为 320x480px。

如果没有 viewport 的设置，也就是下面这一行：

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

那么当一个普通桌面版页面在手机上打开的时候，会发现页面各个元素都会变得很小。无论在桌面设备上还是在移动设备上，用户都习惯上下滚动网站，而不是横向滚动，因此，如果用户必须横向滚动或缩小页面才能查看整个网页，那么这将给用户带来糟糕的体验。

这是因为手机会自动对页面进行它自认为”最好“的缩放，从而尽量把整个页面能在手机这个小的多的屏幕上整个都装下。这个默认行为是我们在做响应式网页设计的时候不希望看到的，所以在一般的响应式页面中，第一步就是添加上面这一行，来禁用手机的这种默认缩放行为。但是究竟上面这些内容都是什么意思呢？不着急，下面慢慢来聊。

逻辑像素

英文叫 dip ，也有人翻译叫”逻辑像素“。简单来说，dip 是咱们在做设计的时候真正要关心的，而设备真正的硬件像素值一般是不需要关心的。先来了解一下下面三个概念：

• 硬件像素：显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。例如，iPhone 5 所配屏幕的水平硬件像素为 640。

• 设备无关像素(dip)：这个是跟设备的硬件像素密码无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。例如：iPhone 5 的设备无关像素宽度为 320。

• CSS 像素：用于页面布局的单位。样式的像素尺寸（例如 width: 100px）是以 CSS 像素为单位指定的。CSS 像素与 dip 的比例即为网页的缩放级别，也就是网页在没有做缩放的时候，一个 css 像素就对应一个 dip 。

举个例子，比如我有一个笔记本，当我把浏览器调到 800 像素宽的时候，那么此时我的 viewport 就是 800 像素宽。但我把浏览器拉宽，viewport 也就不断变宽。但是不同的笔记本的像素密度其实是不一样的，比如我的笔记本的硬件像素是：2560x1700 。但是当我把浏览器拉成全屏的时候，viewport 的宽度值是 1280 。这里显然我的笔记本的设备像素比是 2，1280 是 dip 值。

参数作用详解

使用元视口值 width=device-width 可指示网页与屏幕宽度（以设备无关像素为单位）进行匹配。这样，网页就可以重排内容以匹配不同的屏幕尺寸。

有些浏览器（包括 iOS 和 Windows Phone）在旋转为横向模式时会保持网页宽度不变，并且会缩放（而非重排）网页以填充屏幕。添加属性 initial-scale=1 均可指示浏览器将 CSS 像素与设备无关像素的比例设为 1:1（而不用考虑设备的屏幕方向），并且可让网页利用整个横向宽度。

可以设置 user-scalable=no 来禁用用户缩放功能，但是一般不建议这样做。

参考资源

bootstrap