阅读 684

聊聊viewport那些事儿

前言

在移动端网页开发的时候,我们的页面将会不同于以往的PC网页的开发,因为PC网页的屏幕远远大于手机屏幕上的网页,我们在浏览器上开启手机调试模式的话,看到的效果会呈现出一个缩小的效果,所以我们一般都会制作一个能够适配于小屏幕手机的网站出来,供手机用户浏览。
但是对于viewport的概念可能还不太了解,下面我来讲讲我对viewport的理解

viewport

有时候被称为包含块或视口,可以认为他是html标签的上级元素,html标签会默认等同于他的宽度。

在PC端浏览器上的视口宽度是与浏览器内部的宽度是保持一致的,但是移动端浏览器的情况会不一样,介于各种设备的分辨率大小、以及浏览器的特性、供应商的要求等等方面,它们的视口大小可能会不一样。

一些苹果的手机设备会默认使用980px的视口大小,这就意味着你的网页在苹果手机上显示的效果,将会跟980px的pc下显示没有任何差别,只不过是缩小的而已。

(上图分别以iphone6和PC显示为例)

网页在手机设备上显示都会自动适应该手机设备的布局视口的宽度,因为有个默认的缩放比例,正好让980px缩放到375px(iphone6)的大小,这就是他能完全展示在手机屏幕上的原因。 这时候的页面会呈现的很挤压,但是却能让980px的东西展示在手机上,这就牵扯到三个视口的概念,分别是:布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)

上面陈述的980px的大小其实是来自于布局视口。

我们透过手机屏幕看到的那部分区域——视觉视口

为了容纳手机这个较小的显示区域,视觉视口会默认等同于布局视口,但是手机屏幕远远达不到980px的宽度,所以在手机上会呈现"缩小"的状态,这样能够尽可能的完全渲染出来所有的页面内容,在使用手机调试模式看的时候可以发现这一点。

这时候视觉视口可以通过放大缩小来看到网页的不同角落,但是体验性是很差的。 甚至如果页面宽度过大会出现横向滚动条。

如何做到理想地展示网页的大小,那就需要搬出——理想视口。

理想视口(ideal viewport),其实就是手机屏幕的大小,将布局视口设置成理想视口,页面就能够适应到合适的尺寸,用户就不再需要自己去缩放和拖动网页了。 利用以下代码可以达到这一点:

<meta name="viewport" content="width=device-width"/>
复制代码

这里的width设置就是布局视口的宽度,device-width代表着理想视口的宽度。

可以看到980px的视口现在变成了320px。

这个属性还是有其他成员的:

width 设置的布局视口的宽度
initial-scale 设置初始缩放比例和布局视口的宽度
minimun-scale 设置最小缩放比例
maximum-scale 设置最大缩放比例
height 设置布局视口的高度,但是好像没有作用
user-scalable 是否允许用户缩放 no为不允许
复制代码

我们通常看到的代码都是家庭总动员:

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
复制代码

但是其中的意义还是比较含混,好比如这个 "initial-scale=1.0",为什么需要缩放1倍?

这个初始缩放比例其实是相对于理想视口的,也就是仅仅使用这样的代码就可以达成理想视口:

<meta name="viewport" content="initial-scale=1.0">
复制代码

这段话的意义是将布局视口设置成1倍于理想视口。

那为什么需要多写一遍,原因在于兼容性的问题

我们从上表可以得知,苹果产品是没有完全支持width的,相反IE也不完全支持initial-scale,所以为了达成所有浏览器都能兼容的目的,必要地需要去做这样操作。

initial-scale:先前说到这是相对与理想视口的宽度,就是说如果我们在375px上的屏幕上使用0.5的缩放的话视觉视口就是160px了,是吗?

并不是,现在在视口的大小是:750

原因是原先的1个CSS像素宽能表示2个设备像素宽,现在只能表示1个了(1/2),这时候像素会增多,展示的内容也会增多,所以像素会比原先多了一倍,内容看上去也会小很多

这里有个专门的公式能够告诉你现在的视口是多大:
视觉视口宽度=理想的视口宽度/缩放因子 
复制代码

(上图是用1倍的缩放比例,下图是用2倍的缩放比例)

这里说的CSS像素和设备像素是什么?

设备像素和CSS像素 这里讲到的像素指的分别是我们手机屏幕上看到的物理像素 以及 我们在CSS中使用的像素,他们不是等同的概念.

正常而论,在PC端上是1个设备像素对应1个CSS像素,但在移动端上很多时候其实他们都不是 1:1的关系的。

 而能影响CSS像素与设备像素的对应关系的就是:缩放比例和DPR(设备像素和CSS像素的比值,即设备像素比)。
复制代码

为什么说1个CSS像素宽表示2个设备像素宽?

这是随着时代的变迁带来的结果,市面上的手机不断在更新换代,屏幕的分辨率也在步步攀升,作为手机市场的领头羊——苹果,首先推出了retina屏幕,这时候的dpr=2,像素的密度比之前高了一倍,这样能呈现更清晰、更细腻的效果,原本的1个CSS像素这时候对应的是2倍的设备像素,但其实CSS像素是没有变化的,100px仍然是100px,变化的是设备像素的多少。

PDR为2的情况下像素的对应关系,一个CSS像素宽等于2个设备像素宽,所以一个CSS像素代表着4个设备像素(宽高总和)。

而我们在使用0.5缩放比例的时候,呈现的效果如图示是这样的:

好了 以上是个人结合其他大神理解得来的 还请各位大神不要见笑~ 恳求指正学习~

参考文章:

PPK教程
博客园
简书
div.io
知乎
HcySunYang

评论