返回列表

rem结合dpr及viewport

默认分类 2015/10/22 02:13

rem结合dpr及viewport, 在使用rem过程中,发现会遇到字体略大的问题,可以结合dpr和viewport来解决, 大约在2年前viewport在安卓下的兼容性还有一些问题,最仅实测已经基本上不存在了。

<!DOCTYPE html>
<html>

<head>
<title>rem结合dpr</title>
<meta charset="utf-8" />
<style>
h1 {margin-left: 2rem; margin-top: height: 4rem;}
</style>
</head>

<body>

<h1>This is title.</h1>

<script type="text/javascript">
    (function(doc, win) {
        // 分辨率Resolution适配
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';
            };

        // Abort if browser does not support addEventListener
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);

        // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
        (function() {
            //return;
            var dpr = scale = 0;
            var isIPhone = win.navigator.appVersion.match(/iphone/gi);
            var devicePixelRatio = win.devicePixelRatio;

            if (isIPhone) {
                // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
                if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                    dpr = 3;
                } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                    dpr = 2;
                } else {
                    dpr = 1;
                }
            } else {
                // 其他设备下,仍旧使用1倍的方案
                dpr = 1;
            }

            scale = 1 / dpr;

            // 
            var metaEl = "";
            metaEl = doc.createElement('meta');
            metaEl.setAttribute('name', 'viewport');
            metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(metaEl);
            } else {
                var wrap = doc.createElement('div');
                wrap.appendChild(metaEl);
                doc.write(wrap.innerHTML);
            }
        })();

    })(document, window);
</script>
</body>

</html>