移动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的宽度，就只能去对页面进行缩放，也就是让<meta name="viewport" content="width=width-device,initial-scale=0.5;minimum-scale=0.5,maximum-scale=0.5,user-scalable=no"/>
js里面已经有了获取屏幕缩放比的属性了，window.devicePixelRatio,比如iphone5的这个值就是2等等。这样有了缩放比。我们就可以通过js动态设置meta标签和里面的缩放比了，有了这些内容，我们就能在屏幕上做到1px显示1px的效果了。

通用设置

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="renderer" content="webkit">

<meta name="MobileOptimized" content="320">

<meta name="keywords" content="">
<meta name="description" content="">

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

<meta name="HandheldFriendly" content="true">

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<meta name="format-detection" content="telphone=no, email=no" />

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

<meta name="msapplication-tap-highlight" content="no">

子元素高度100%

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

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