1. 页面宽度320， 所有元素尺寸设一半
缺点：不自能适应全屏
2.页面宽度640，元素尺寸正常
<meta charset="utf-8" />
<meta name='viewport' content='width=640, user-scalable=no, target-densitydpi=device-dpi' /> <meta http-equiv="keywords" content="" /> <meta name="description" content="" />
内嵌到app端有时会有尺寸问题 3.页面宽度640，js控制自适应全屏
<script type="text/javascript">
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('6 P=(h(){6 4=(h(){6 g={};6 N={a:e.C.a,i:e.C.i};6 t=e.K.Y;6 s=e.l;6 j=w;6 I=h(f){m f.18==X?t.y(f)>-1:t.R(f)};6 v=h(b,f,p){7(b&&f)g[b]={f:f,p:p}};6 x=h(b){7(g[b])Q g[b]};6 8=h(){7(j!=w)m j;S(6 b T g){7(I(g[b].f)){j=g[b].p;V}}7(j==w)j=N;m j};m{v:v,x:x,8:8,s:s}})();6 z=h(q){6 3,9,u,B,d,c,o;o=K.1b.16();A=o.y(\'W\')>-1||o.y(\'17\')>-1;9=e.9;9<1.5?2:9;7(e.l==0||e.l==F){7(4.s!=0){7(4.8().a<4.8().i){3=4.8().a}k{3=4.8().i}}k{3=4.8().a}}k{7(4.s!=0){7(4.8().a>4.8().i){3=4.8().a}k{3=4.8().i}}k{3=4.8().i}}7(9==2&&(3==D||3==14||3==13||3==r)){3*=2};7(9==1.5&&(3==D)){3*=2;9=2};7(9==1.5&&(3==r)){9=2};u=q/3*9*Z;B=A?\'a=\'+q+\'10, M-L=H\':\'12-11=\'+u+\', a=\'+q+\', M-L=H\';d=G.19(\'d\');c=G.15(\'U\');c.b=\'c\';c.O=\'c\';c.E=B;7(A&&e.l!=0&&e.l!=F){c.E=\'a=r\';d.n>0&&d[d.n-1].J(c)}k{d.n>0&&d[d.n-1].J(c)}};m{4:4,z:z}})();6 1a=r;',62,74,'|||deviceWidth|regulateScreen||var|if|cal|devicePixelRatio|width|name|viewport|head|window|key|cache|function|height|_|else|orientation|return|length|ua|size|uiWidth|640||ver|targetDensitydpi|add|null|del|indexOf|adapt|isiOS|initialContent|screen|320|content|180|document|no|check|appendChild|navigator|scalable|user|defSize|id|adaptUILayout|delete|test|for|in|meta|break|ipad|String|appVersion|160|px|densitydpi|target|592|360|createElement|toLowerCase|iphone|constructor|getElementsByTagName|_initViewportWidth|userAgent'.split('|'),0,{}));
adaptUILayout.adapt(_initViewportWidth);
</script>
缺点：qq空间分享后点开页面套在qq默认浏览器里有兼容性问题
4.rem写法，所有元素原尺寸长宽除以100，（注意背景图，图片的大小需要设置）
<script type="text/javascript">
//auto adaptation
var calculate_size = function () {
var BASE_FONT_SIZE = 100;
var docEl = document.documentElement,
clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 640) + 'px';
};
// Abort if browser does not support addEventListener
if (document.addEventListener) {
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
window.addEventListener(resizeEvt, calculate_size, false);
document.addEventListener('DOMContentLoaded', calculate_size, false);
calculate_size();
}
</script> <script type="text/javascript">
var root = document.getElementsByTagName('html')[0],
NATIVE_W = 640;
function updateSize(){ var w = window.innerWidth; var cw = w / (NATIVE_W / 100); root.style.fontSize = cw + 'px'; } window.onload = function(){ updateSize(); document.getElementsByTagName('body')[0].style.display = 'block'; } window.onresize = function(){ updateSize(); } </script> <body class="dis_none"></body>
缺点：挺麻烦 5.百分比
头部： <meta charset="utf-8" />
<meta name="author" content="" /> <meta name="copyright" content="" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"> 转载于:https://www.cnblogs.com/czzblog/p/4312879.html
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)