1. rem單位方式，用法當前像素除以100。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>H5移動端</title>
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="static/css/public.css" />
<script>
(function (root) {
var docEl = document.documentElement,
timer = null,
width, last;
function changeRem () {
width = docEl.getBoundingClientRect().width;
if (last === width) { return; }
last = width;
root.rem = (width / 640) * 100;
if (/ZTE U930_TD/.test(navigator.userAgent)) {
root.rem = root.rem * 1.13;
}
docEl.style.fontSize = root.rem + 'px';
}
changeRem();
root.addEventListener('resize', function () {
clearTimeout(timer);
timer = setTimeout(changeRem, 300);
});
root.addEventListener('orientationchange', function () {
clearTimeout(timer);
timer = setTimeout(changeRem, 300);
});
})(window, undefined);
</script>
</head>
2. px單位方式，以640px設計圖比例實現。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" />
<title>H5移動端</title>
<link rel="stylesheet" type="text/css" href="static/css/public.css" />
<script>
if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
var version = parseFloat(RegExp.$1);
if(version > 2.3){
var phoneScale = parseInt(window.screen.width) / 640;
document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
}else{
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
if(navigator.userAgent.indexOf('MicroMessenger') >= 0){
document.addEventListener('WeixinJSBridgeReady', function() {
//alert(1)
//WeixinJSBridge.call('hideToolbar');
});
}
</script>
</head>
3.px單位方式，以設計圖640除以2實現。
<!doctype html>
<html class="l-xheight">
<head>
<meta charset="UTF-8">
<meta name="copyright" content="Tencent"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>首頁</title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/css.css" />
</head>
4.px單位方式及media媒體查詢方式實現，判斷最大、最小方式實現，設計圖還是640標准。
<!doctype html>
<html class="l-xheight">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<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="telephone=no" />
<title>首頁</title>
<link rel="stylesheet" href="css/public.css" />
</head>
注，第一種、二種方式是現在比較好用的