移动web端揭秘

viewport 视口(可视区窗口)

默认不设置viewport一般可视区宽度在移动端是980
width 可视区的宽度 (number||device-width)
user-scalable 是否允许用户缩放 (yes||no)
initial-scale 初始缩放比例
minimum-scale 最小缩放比例
maximum-scale 最大缩放比例

移动端缩放比例

缩放比例,即就是你写的css里的1px在屏幕上显示也是1px的宽度,这就是1:1的缩放比例关系,当你在移动设备上做开发时,为了能让用户在屏幕上看的更加清晰,这时Retina屏来了,他会把画布的大小放大到原来的2倍,也就是说现在我写的css里的1px在屏幕上展示的是2px的宽度。在平时开发的时候我想要设置1px的边框,总不可能在css里写0.5px吧,所以为了让1px的宽度在屏幕上显示也是1px的宽度,就只能去对页面进行缩放,也就是让
js里面已经有了获取屏幕缩放比的属性了,window.devicePixelRatio,比如iphone5的这个值就是2等等。这样有了缩放比。我们就可以通过js动态设置meta标签和里面的缩放比了,有了这些内容,我们就能在屏幕上做到1px显示1px的效果了。

通用设置



































子元素高度100%

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。
因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。换句话说,父元素的高度只是一个缺省值:height: auto;当你要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。如果想让一个元素的百分比高度height: 100%起作用,你需要给这个元素的所有父元素的高度设定一个有效值。

⚠️Margin和 padding 会让你的页面出现滚动条,也许这是你不希望的。

你可能感兴趣的:(移动web端揭秘)