对viewport元标签的理解

289 查看

最近学习了一下bootstrap，看到它的中文文档里说bootstrap3是移动设备优先的，然后看到：

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

以及下面这行代码：

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

这个viewport的meta标签我以前没见过，那么这个针对移动设备的viewport元标签是什么意思呢？

我google了一下，找到了两篇文章，这里把我理解的部分总结一下，原文章地址列在最后的参考部分。

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域；具体的说，就是移动浏览器中用来显示网页的那部分区域。

要深入理解viewport的概念，首先要了解移动浏览器与传统桌面浏览器的一个不同点：

css中的1像素不一定等于移动设备的1像素

在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，但实际上，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。

想想看，为什么在移动设备中不让css的1像素就等于一个物理像素呢？主要是以下两个原因：

屏幕分辨率：以iPhone 3为例，它的像素数为320x480，我们假设在iphone3上，一个css像素确实是等于一个屏幕物理像素的，到了iPhone 4，屏幕尺寸不变，像素数变成了640x960，分辨率提高了一倍，如果一个css像素还是等于一个屏幕物理像素的话，同样的内容在iPhone 4的屏幕上，显示出来的大小就只有iPhone 3显示大小的四分之一，这就可能大大降低页面对于用户的可读性，这时，如果我们让一个css像素等于两个屏幕物理像素的话，就能使显示大小保持和iPhone 3一样大；
用户缩放：在可以缩放的移动浏览器中，假如用户把页面放大一倍，为了使显示的内容大小也增大一倍，就要使一个css像素所代表的物理像素增大一倍

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过window.devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。

三个不同的viewport概念

Visual viewport：移动浏览器可视区域的大小，宽度可以通过window.innerWidth 来获取
Layout viewport：移动设备的屏幕相对桌面显示器一般要窄不少，那些没有为移动设备优化过的页面如果要以可读的大小显示内容的话，visual viewport的宽度就不够了，如果只用移动浏览器可视区域作为viewport的话，就可能由于viewport过窄而使页面挤成一团，甚至布局乱掉。所以这些移动浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为只桌面设计的网站页面也能在移动浏览器上正常显示了（超出宽度的部分可以通过横向滚动条访问）。这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。
Ideal viewport：横向滚动条并不符合人的触屏手机操作习惯，把不需要横向滚动和显示文字大小合适（不需要手动缩放）的viewport称为完美适配移动设备的理想viewport，也就是移动设备的屏幕宽度，所以前面提到的iphone 3和iphone 4的Ideal viewport都是320px，如果在css中把某一元素宽度设为320px，就能在这两个设备中都100%宽度显示。

Visual Layout
Ideal Ideal

用meta元标签控制viewport

移动设备默认的viewport是layout viewport，但我们需要ideal viewport，这就要用到viewport元标签了。

Mobile Safari 引入了”viewport元标签“来让web开发者控制视口的尺寸及比例。

再来看看我一开始在bootstrap文档里看到的meta标签：

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

在某些页面里可能是这样的：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

该meta标签的作用是让当前viewport的宽度等于设备的宽度，也就是width=device-width，这样就不会出现横向滚动条了，initial-scale和maximum-scale分别是页面初始缩放值和允许用户最大缩放值，user-scalable表示是否允许用户缩放，如果禁用缩放功能，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。

总结

viewport元标签是为了使针对移动设备Ideal viewport而设计的页面在移动浏览器中能够以没有横向滚动条且大小可读的理想形式展现。
移动浏览器为了良好显示没有针对移动设备优化的传统桌面网站页面，默认用比浏览器可视范围更宽的layout viewport，视口宽度能容下整个页面，不会打乱布局，但是会有横向滚动条

现在，你可以试着打开一个应用了bootstrap框架的网页和一个没有适配移动端浏览器的网页，把浏览器宽度变窄，怎么样，看到什么不一样了吗？

是的，区别就在那个横向滚动条~

参考资料：

如果觉得这篇文章帮到了你，可以用支付宝或者微信捐赠一下哦~谢谢
图片描述