页面适配
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, minimum-scale=1">
<!--禁止IOS识别号码 -->
<meta content="email=no" name="format-detection"/>
<!-- 页面适配 -->
<script type="text/javascript">
(function(){
var resizeEvent = 'orientationchange' in window ? 'orientationchang' :'resize';
var rescale = function(){
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
//640的屏幕宽度 100为字体大小 rem 也就是1rem=100px; 代码中若遇到px计算成rem 直接除以100
}
window.addEventListener(resizeEvent,rescale,false);
document.addEventListener('DOMContentLoaded',rescale,false);
})();
</script>
body的width为640 / 100 = 6.4rem
html font-size可能需要额外的媒介查询，并且font-size不能使用rem，如网易的设置：
html
@media screen and (max-width:321px){ .m-navlist{font-size:15px}}
@media screen and (min-width:321px) and (max-width:400px){ .m-navlist{font-size:16px}}
@media screen and (min-width:400px){ .m-navlist{font-size:18px}}
若用px: 则添加代码：
<meta content="width=device-width,width=640,user-scalable=no" name="viewport" >
