关于viewpoint的疑惑

Posted 2020-06-08

问题：

为什么在手机上打开一个PC web页面，用手机打开一个宽度为980的固定布局页面，页面会默认缩放到刚好满屏显示，并不会出现横向滚动条？

 

一：设备像素和CSS像素区别

现代浏览器中实现缩放的方式无怪乎都是「拉伸」像素。所以，元素的宽度并没有从128个像素被修改为256个像素；相反是实际像素被放大了两倍。形式上，元素仍然是128个CSS像素宽，即使它占据了256个设备像素的空间。

换句话说，放大到200%使一个CSS像素变成为一个设备像素的四倍。（宽度2倍，高度2倍，总共4倍）

在缩放比例100%的情况下一个CSS像素完全等于一个设备像素。

 

二、为桌面设计的网页在手机上如何显示？

先说一下PC web的两种布局，一般的网页如果用固定布局都会定义好整个页面的宽度，常见的宽度是980px，当屏幕分辨率的宽度大于980px的时候，如：1024*768，页面就居中，两边留白；如果屏幕分辨率小于980px的时候，如：800*600，页面就会出现横向的滚动条，这应该是所有前端开发人员都不希望出现的，所幸的是目前大多数显示器的屏幕分辨率都是1024*768以上的，所以宽度为980px的固定布局是安全又放心的。而如果用流动布局做网页的话一般要自应适不同的分辨率满屏显示以让内容区域达到最大化，流动布局的例子有很多，如邮箱、博客园等等。

在显示面积上手机屏幕相对桌面显示器要小很多，在几年前（现在也如此）大部分网站都是为桌面显示器浏览而设计，很少考虑到适应手机屏幕，所以如果用手机浏览大多网站时会出现问题，比如常见固定宽度的网页会出现横向竖向滑动条，当然这不算什么大问题；但如果是浏览流动布局的网页那情况会非常糟糕，设想一个宽度为 30% 的侧边栏对于 320px 手机屏幕而言也就 96px，只能容纳八个 12px 的汉字，可阅读性非常差。

接下来说说手机上打开一个PC web页面，用手机打开一个宽度为980px的固定布局页面，页面会默认缩放到刚好满屏显示，并不会出现横向滚动条，这个现象并不让我感到奇怪，我认为这是手机厂商的一些设定造成的，但关键是做了什么“手脚”，后来网上查阅了很多资料知道这是因为浏览器的两个viewport：layout viewport & visual viewport

 

三、layout viewport 

手机浏览器在显示网页时，会在设备屏幕（设备分辨率）上创建一个980px（css像素）的虚拟窗口，然后使用该虚拟窗口显示网页，所以网站会缩小显示。一般把这个虚拟窗口称为layout viewport。

说白了其实就是把980px的CSS像素装进了320px(假设手机分辨率是320px)的设备像素下。

layout viewport的默认值：

 

 

四、为什么要使用viewport？

有了 layout viewport 似乎解决手机浏览网页的难题，但如果遇到专门为手机优化的网页就又有新的问题：

即为 iPhone 的 layout viewport 默认为 980px，导致专为其优化的 320px 宽的页面只能以缩放的方式显示（只占手机的30%），这时就需要对 layout viewport 进行设置：

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

这一meta标签的功能就是设置layout viewport为device-width的宽度。
即当你的设备宽度为320px时，我的layout viewport的值也为320px，显示网页虚拟窗口和设备宽度一样，不需要再缩放了。也就是也这个设备专门设计的320px宽的网站可以非常正常的使用了。

当然如果这个网站是1000px的话，在手机上使用该viewport在手机上显示还是会缩放的。