頁面適配
<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爱榔，如網(wǎng)易的設置：
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" >
