前端之viewport

2019独角兽企业重金招聘Python工程师标准>>>

    做过响应式开发或者移动端开发的前端对于viewport应该都不会陌生。我也用了一段时间了，今天我也试着总结一下viewport的相关的知识。

    移动设备上的viewport就是用来显示我们的网页的那一块区域，直接翻译过来也可以称之为视口。移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的）,这个viewport的宽度默认是和可视区域的宽度一样大小的(一般默认是要缩放的，viewport的1px和设备的分辨率的1px不一样，如：iphone5的宽是320px，横向分辨率是640px，viewport的宽是980px，而他们都是屏幕宽度这么多)，这么做的目的是为了能让我们pc端的网页尽量能在一屏就显示在手机上。我们用的css的1px并不是屏幕的1px，而是这个viewport的1px，因为手机会自动缩放viewport，这也是为什么我们pc端的网页放到手机上的时候上面的文字上面的都缩小了。

    说到这里，有的人会把屏幕分辨率、屏幕像素密度拿来和css1px做比较，换句话说这两个东西对我们做移动开发有没有影响呢？我做移动web开发也算有段时间，感觉没怎么用到这两东西，但是我们知道屏幕分辨率越大，屏幕越小，一个屏幕中的像素数量也就越多,屏幕像素密度也就越大，这会让我们的画面看起来更加细腻，更加清晰动人，但是对于我们移动web开发的影响，目前我没怎么感觉到很大。

    说了这么多，其实我们无非就是想利用viewport来方便我们进行响应式开发或者移动开发，上代码：

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

这是我在做移动开发的时候用得比较多的一段代码，“width=device-width” 是为了把viewport的宽度设置为设备的宽度，如iPhone5，即将其viewport的宽度设置为320px；“initial-scale=1.0” 是为了设置页面的初始缩放值为不缩放；“user-scalable=no” 是为了把页面设置为不允许用户进行缩放。一般来说我们这么设置，开发移动应用就足够了，不过有的时候也有可能用到其他的值，viewport可设置的值如下：

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

 

转载于:https://my.oschina.net/liuyongfov/blog/747553