你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
南洋fromiris

lib-flexible.js中将iphone条件下的initial-scale进行动态变换真的有必要吗? 2个回答 问答 专栏 @ Javascript

南洋fromiris 发布于 3 年前

有个疑问:
在ios下根据dpr的不同将页面进行缩放有没有绝对的必要?

if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        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;
    }

metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

我们知道动态的改变initial-scale会改变页面layout viewport,从而改变页面的html标签的宽度。
如图, image

image

这样有一个好处是完全的高清显示,改善了「著名」的border:1px 问题。见连接:http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041

但是除此之外我好像找不到其他这样做的理由了。

至于retina图片的适配,dpr限定为1也是同样能操作的(@2x图)

dpr进行变换还要去维护字号在不同dpr下的兼容。

基于这几个考量?lib-flexible.js中将iphone条件下的initial-scale进行动态变换真的有必要吗?

登录后回复,如无账号,请使用邀请码注册