手机端flex、字体设置、快速点击

;(function flexible (window, document) {
        var docEl = document.documentElement
♥1       var dpr = window.devicePixelRatio || 1

        // adjust body font size
        function setBodyFontSize () {
♦2           if (document.body) {
                document.body.style.fontSize = (12 * dpr) + 'px'
            }
            else {
♣3               document.addEventListener('DOMContentLoaded', setBodyFontSize)
            }
        }
        setBodyFontSize();

        // set 1rem = viewWidth / 10
        function setRemUnit () {
            var rem = docEl.clientWidth / 10
            docEl.style.fontSize = rem + 'px'
        }

        setRemUnit()

        // reset rem unit on page resize
25♣3       window.addEventListener('resize', setRemUnit)
26♣3       window.addEventListener('pageshow', function (e) {
27◊4           if (e.persisted) {
                setRemUnit()
            }
        })

     
        44     }(window, document));

 1

window.devicePixelRatio 是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
devicePixelRatio 是“物理像素”和“逻辑像素”（也就是 CSS ）之间的比例。所以网页如果没有针对这个数值优化，图片会看起来比较模糊。

 2

document.body xhtml 特有事件
h5 直接支持body

 3 

window.resize 宽度自适应问题
window.pageshow 当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)
e.persisted 从缓存中读取 true？false

https://developer.mozilla.org/en-US/docs/Web/API/PageTransitionEvent/persisted多跟e.persisted 混合出现

 // 消除click在移动浏览器上物理点击与时间触发延迟300ms的问题
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function () {
            window.FastClick.attach(document.body);
            console.log('执行了快速点击的处理操作');
        });
    }

记得引入fast.click js

 

 

手机端测试有一个vConsole.js

调用 

var vConsole = new VConsole();