移动端开发:关于viewport

53 阅读8分钟
viewport的概念

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。

在默认情况下,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(该值由设备自己屏幕大小决定),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

css中的1px并不等于设备的1px

在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中,我们无需对这个斤斤计较,但在移动设备上,必须弄明白这点。

在早先的移动设备中,屏幕像素密度都比较低,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素越来越高,从iphone4开始,分辨率提高了,但屏幕尺寸没变,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。

还有一个因素也会引起css中px的变化,那就是用户缩放,例如,当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。

window对象中有一个devicePixelRatio属性,官方定义为:设备物理像素和设备独立像素的比例。devicePixelRatio = 物理像素 / 设备独立像素

关于viewport的三个理论

因为分辨率增大,但屏幕尺寸没有变大多少,必须让css中的1px代表更多的物理像素,才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多,不然就会因为太小而看不清。所以在1080x1920这样的设备上,在默认情况下,也许你只要把一个div的宽度设为300多px,就是满屏的宽度了。回到正题上来,如果把移动设备上浏览器的可视区域设为viewport的话,某些网站就会因为viewport太窄而显示错乱,所以这些浏览器就决定默认情况下把viewport设为一个较宽的值,比如980px,这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。

这个浏览器默认的viewport叫做 layout viewport。这个宽度可以通过document.documentElement.clientWidth来获取。

然而,layout viewport 的宽度是大于浏览器可视区域宽度的,所以我们还需要一个viewport 来代表浏览器的可视区域的大小,这个viewport 叫做 visual viewport。这个viewport可以通过window.innerWidth 来获取。

现在已经有两个viewport了:layout viewport 和 visual viewport。

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

ideal viewport并没有一个固定的尺寸,不同的设备拥有不同的ideal viewport。它类似于layout viewport ,但宽度和visual viewport相同。

利用meta标签对viewport进行控制

移动设备默认的viewport是 layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是 ideal viewport

那么怎么才能获取 ideal viewport 呢? 这时候轮到meta标签出场了。

我们在开发移动设备网站时,最常见的一个动作就是把下面这个东西复制到我们的head标签中:

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

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。

这个name 为 viewport 的 meta的标签到底有哪些东西呢?又都有什么作用呢?

meta viewport标签首先是苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。

在苹果的规范中,meta viewport有6个属性,多个属性同时使用逗号隔开就行。

属性描述
width设置layout viewport的宽度为一个正整数,或字符串"width-device"
intial-scale设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale允许用户的最大缩放值,为一个数字,可以带小数
height设置Layou viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable是否允许用户进行缩放,值为"no"或"yes","no"代表不允许,"yes"代表允许
把当前的viewport宽度设置为 ideal viewport的宽度

要获取ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度,所以我们只需要把width设为width-device这个特殊的值就行了。

<meta name="viewport" content="width=device-width">

这句代码也能达到和前一句代码一样的效果,也可以把当前的的viewport变为 ideal viewport:

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

可以看到通过width=device-width,所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度。但要注意的是,在iphone和ipad上,无论是竖屏还是横屏,宽度都是竖屏时ideal viewport的宽度。

总结

首先如果不设置meta viewport标签,那么移动设备上浏览器默认的宽度值为800px,980px,1024px等这些,总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px,它跟代表实际屏幕物理像素的px不是一回事。

第二、每个移动设备浏览器中都有一个理想的宽度,这个理想的宽度是指css中的宽度,跟设备的物理宽度没有关系,在css中,这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度,如果不知道这个设备的理想宽度是多少,那么用device-width这个特殊值就行了,同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。所以,我们可以使用

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

来得到一个理想的viewport(也就是前面说的ideal viewport)。

为什么需要有理想的viewport呢?比如一个分辨率为320x480的手机理想viewport的宽度是320px,而另一个屏幕尺寸相同但分辨率为640x960的手机的理想viewport宽度也是为320px,那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢?这是因为,只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上,现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机,但它们的理想viewport宽度归纳起来无非也就 320、360、384、400等几种,都是非常接近的,理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站,在其他设备上的表现也不会相差非常多甚至是表现一样的。

转载:www.cnblogs.com/2050/p/3877…