移动端viewport的理解

╰+哭是因爲堅強的太久メ 2022-06-06 08:46 243阅读 0赞

1.viewport的理解：viewport事实上是用来承载页面的，大部分设备默认为980px，一般情况下会有一个默认的初始缩放比，通过这个初始缩放比使得viewport能够完全显示在设备上，设备宽度为一般为320px，pc端页面承载在viewport上，viewport通过缩放显示在设备上，从而使得pc端页面能够完整的显示，不需要滚动条，此时的缩放比为320/980=0.33。即默认设备上显示的内容是经过缩放的。

2.当指定了initial-scale的值后，这个默认值就不起作用了。如果指定initial-scale=1.0即表示按原来内容的大小显示，原来字体多大，在设备上就显示多大。

3.initial-scale会改变原有内容的大小，如div原先宽度为320px，当设置initial-scale=2时，此时的div宽度就会变为原来的一半。但是字体效果会变大。

4.width=device-width表示viewport的宽度等同于设备的宽度，pc端页面的内容基于viewport显示，如果pc端设置容器的width=100%，此时页面的宽度即为设备的宽度。当容器的宽度大于viewport的宽度时，在移动端显示会出现滚动条，当小于viewport的宽度时会出现空白部分。

5.maximum-scale最大缩放比和minimum-scale最小缩放比，表示是由用户可以缩放的范围，一般在移动端，用户可以放大或缩小内容，这两个属性就是表示基于原内容缩放的比例，如果设置user-scalable=no或0，那么上述两个属性就没有作用了。

6.移动端viewport设置的标准：

附：当设置initial-scale=2时，假设此时设备宽度为320px，表示此时的viewport宽度等于160px，即用160px去承载页面，当pc端页面的宽度大于160px时则在移动端显示时就会出现水平方向的滚动条，小于160px会出现空白部分。虽然viewport的宽度为160px，设备的宽度为320px，在显示时是全屏显示的，原因是此时是用设备上的2px去渲染页面上的1px，很明显，此时的页面会显得更加清晰，字体等被放大。

7.iphone5分辨率为640dp\*1136dp <=> 320px \* 568px,即用2个dp去渲染1px，因此在移动端会出现一像素边框问题。