Viewport // meta: // <meta content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport"> (function (init_width) { var isAndroid = navigator.userAgent.match(/(Android)/i), viewPort = document.querySelector('meta[name=viewport]'); window.html_font_size = isAndroid ? 100 : (window.innerWidth * 100) / init_width; function setHtmlWidth() { document.querySelector('html').style.fontSize = html_font_size + 'px'; } if (isAndroid) { content = 'target-densitydpi=320,width=' + init_width + ',user-scalable=no'; viewPort.setAttribute('content', content); } else { setHtmlWidth(); window.onresize = setHtmlWidth; } })(640); CSS reset /*css reset*/ html { font-size: 100px; } body { font-size: 0.12rem; font-family: '微软雅黑', '宋体', 'arial'; font-weight: normal; overflow-x: hidden; } body, ul, ol, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, form, textarea, input { margin: 0; } ul, ol { list-style: none; } ul, ol, input { padding: 0; } table { margin: 0 auto; width: 100%; border-collapse: collapse; } a img { border: 0; } input[type='button'], input[type='submit'], input[type='reset'] { -webkit-appearance: none; } .clearfix:after { content: ' '; display: block; clear: both; height: 0; } img { width: 100%; } .max_width { width: 6.4rem; margin: 0 auto; position: relative; } .clear { width: 100%; height: 0; clear: both; } .clear30 { height: 30px; } .clearfix { zoom: 1; } img, object, audio, vedio { max-width: 100%; } a { text-decoration: none; } html <div class="wrap clearfix"> <div class="max_width"></div> </div>