[使用Flexible实现手淘H5页面的终端适配](https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html) - [lib-flexible](https://github.com/amfe/lib-flexible/blob/2.0/index.js) [再聊移动端页面的适配](https://www.w3cplus.com/css/vw-for-layout.html) [如何在Vue项目中使用vw实现移动端适配](https://www.w3cplus.com/mobile/vw-layout-in-vue.html) ```js !(function(t, document) { var n = document.documentElement, r = t.devicePixelRatio || 1; function i() { var t = n.clientWidth / 10; n.style.fontSize = t + 'px'; } if ( ((function t() { document.body ? (document.body.style.fontSize = 12 * r + 'px') : document.addEventListener('DOMContentLoaded', t); })(), i(), t.addEventListener('resize', i), t.addEventListener('pageshow', function(t) { t.persisted && i(); }), r >= 2) ) { var o = document.createElement('body'), s = document.createElement('div'); (s.style.border = '.5px solid transparent'), o.appendChild(s), n.appendChild(o), 1 === s.offsetHeight && n.classList.add('hairlines'), n.removeChild(o); } })(window, document); ``` ```js var PAGE_MAX_WIDTH = 640, BASE_FONT_SIZE = 50; //在窗口各宽情况时,动态计算出html的font-size !(function() { var DOC_ROOT_STYLE = document.documentElement.style, docEle = document.documentElement || document.body; window.addEventListener('load', resizeFontSize); window.addEventListener('resize', resizeFontSize); resizeFontSize(); function resizeFontSize() { var clientWidth = Math.max(docEle.clientWidth || 0, window.innerWidth || 0); DOC_ROOT_STYLE.fontSize = Math.min( (clientWidth / PAGE_MAX_WIDTH) * BASE_FONT_SIZE, BASE_FONT_SIZE, ) + 'px'; } window.alert = function(name) { var iframe = document.createElement('IFRAME'); iframe.style.display = 'none'; iframe.setAttribute('src', 'data:text/plain,'); document.documentElement.appendChild(iframe); window.frames[0].window.alert(name); iframe.parentNode.removeChild(iframe); }; // (function androidInputBugFix() { // // .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug // // 解决方法: // // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题 // // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element // // Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把 // if (/Android/gi.test(navigator.userAgent)) { // window.addEventListener('resize', function () { // if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') { // window.setTimeout(function () { // document.activeElement.scrollIntoViewIfNeeded(); // }, 0); // } // }); // } // })(); })(); ```