ViewPort

Viewport介绍

一、Viewport的概念

通俗的讲&＃xff0c;移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域&＃xff0c;在具体一点&＃xff0c;就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域&＃xff0c;但viewport又不局限于浏览器可视区域的大小&＃xff0c;它可能比浏览器的可视区域要大&＃xff0c;也可能比浏览器的可视区域要小。在默认情况下&＃xff0c;一般 来讲&＃xff0c;移动设备上的viewport都是要大于浏览器可视区域的&＃xff0c;这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小&＃xff0c;所以为了能在移动设备上正 常显示那些传统的为桌面浏览器设计的网站&＃xff0c;移动设备上的浏览器都会把自己默认的viewport设为980px或1024px&＃xff08;也可能是其它值&＃xff0c;这个是由 设备自己决定的&＃xff09;&＃xff0c;但带来的后果就是浏览器会出现横向滚动条&＃xff0c;因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

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

在css中我们一般使用px作为单位&＃xff0c;在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素&＃xff0c;这可能会造成我们的一个错觉&＃xff0c;那就是css 中的像素就是设备的物理像素。但实际情况却并非如此&＃xff0c;css中的像素只是一个抽象的单位&＃xff0c;在不同的设备或不同的环境中&＃xff0c;css中的1px所代表的设备物理 像素是不同的。在为桌面浏览器设计的网页中&＃xff0c;我们无需对这个津津计较&＃xff0c;但在移动设备上&＃xff0c;必须弄明白这点。在早先的移动设备中&＃xff0c;屏幕像素密度都比较低&＃xff0c;如 iphone3&＃xff0c;它的分辨率为320x480&＃xff0c;在iphone3上&＃xff0c;一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展&＃xff0c;移动设备的屏幕像 素密度越来越高&＃xff0c;从iphone4开始&＃xff0c;苹果公司便推出了所谓的Retina屏&＃xff0c;分辨率提高了一倍&＃xff0c;变成640x960&＃xff0c;但屏幕尺寸却没变化&＃xff0c;这就意味着 同样大小的屏幕上&＃xff0c;像素却多了一倍&＃xff0c;这时&＃xff0c;一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为 ldpi、mdpi、hdpi、xhdpi等不同的等级&＃xff0c;分辨率也是五花八门&＃xff0c;安卓设备上的一个css像素相当于多少个屏幕物理像素&＃xff0c;也因设备的不同而不 同&＃xff0c;没有一个定论。

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

三、利用meta标签对viewport进行控制

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

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

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的&＃xff0c;目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿&＃xff0c;引入对meta viewport的支持&＃xff0c;事实也证明这个东西还是非常有用的。

在苹果的规范中&＃xff0c;meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)&＃xff0c;如下&＃xff1a;

width

设置layout viewport  的宽度&＃xff0c;为一个正整数&＃xff0c;或字符串"width-device"

initial-scale

设置页面的初始缩放值&＃xff0c;为一个数字&＃xff0c;可以带小数

minimum-scale

允许用户的最小缩放值&＃xff0c;为一个数字&＃xff0c;可以带小数

maximum-scale

允许用户的最大缩放值&＃xff0c;为一个数字&＃xff0c;可以带小数

height

设置layout viewport  的高度&＃xff0c;这个属性对我们并不重要&＃xff0c;很少使用

user-scalable

是否允许用户进行缩放&＃xff0c;值为"no"或"yes", no 代表不允许&＃xff0c;yes代表允许

这些属性可以同时使用&＃xff0c;也可以单独使用或混合使用&＃xff0c;多个属性同时使用时用逗号隔开就行了。

四、总结

第一&＃xff0c;必须设置 meta viewport 标签

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

第二、设置浏览器视口宽度为设备理想宽度

每个移动设备浏览器中都有一个理想的宽度&＃xff0c;这个理想的宽度是指css中的宽度&＃xff0c;跟设备的物理宽度没有关系&＃xff0c;在css中&＃xff0c;这个宽度就相当于100%的 所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度&＃xff0c;如果不知道这个设备的理想宽度是多少&＃xff0c;那么用device- width这个特殊值就行了

--------------------- 
作者&＃xff1a;pQ561017_ 
来源&＃xff1a;CSDN 
原文&＃xff1a;https://blog.csdn.net/pQ561017_/article/details/81203331 
版权声明&＃xff1a;本文为博主原创文章&＃xff0c;转载请附上博文链接&＃xff01;