javascript - 移动端引用一段缩放的js后，ios设备上的二维码不能识别。

问题描述

问 题

这段js是用于移动端缩放，适应各种手机屏幕，一直以来没有问题。

某天涉及到一个二维码页面，发现在ios设备上二维码不能识别，注释掉这段js后，就能识别。

贴出来大家一起讨论解决方案^^

;(function (win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;

    var devicePixelRatio = win.devicePixelRatio;
    var dpr = 1; // 物理像素与逻辑像素的对应关系
    var scale = 1; // css像素缩放比率
    // 设置viewport
    function setViewport() {
        var isIPhone = !!win.navigator.appVersion.match(/iphone/gi);
        if (isIPhone) {
            if (devicePixelRatio >= 3) {
                dpr = 3;
            }
            else if (devicePixelRatio === 2) {
                dpr = 2;
            }
            else {
                dpr = 1;
            }
        }
        win.devicePixelRatioValue = dpr;
        //win.devicePixelRatio = win.devicePixelRatio*win.devicePixelRatio;
        scale = 1 / dpr;
        var 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);
        }
    }
    setViewport();

    var newBase = 100;

    function setRem() {
        var visualView = Math.min(docEl.getBoundingClientRect().width, lib.maxWidth * dpr); // visual viewport
        newBase = 100 * visualView / lib.desinWidth;
        lib.newBase = newBase;
        docEl.style.fontSize = newBase + 'px';
    }
    var tid;
    lib.desinWidth = 640;
    lib.baseFont = 18;
    lib.maxWidth = 540;
    lib.init = function () {
        win.addEventListener('resize', function () {
            clearTimeout(tid);
            tid = setTimeout(setRem, 300);
        }, false);
        /*win.addEventListener('onorientationchange', function () {
            clearTimeout(tid);
            tid = setTimeout(setRem, 300);
        }, false);*/
        win.addEventListener('pageshow', function (e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(setRem, 300);
            }
        }, false);
        if (doc.readyState === 'complete') {
            doc.body.style.fontSize = lib.baseFont * dpr + 'px';
        }
        else {
            doc.addEventListener('DOMContentLoaded', function (e) {
                doc.body.style.fontSize = lib.baseFont * dpr + 'px';
            }, true);
        }
        setRem();
        docEl.setAttribute('data-dpr', dpr);
    };
})(window, window['adaptive'] || (window['adaptive'] = {}));

window['adaptive'].desinWidth = 750;
window['adaptive'].baseFont = 14;
window['adaptive'].maxWidth = 1280;
window['adaptive'].init();

function rem2px(r){
    return r *  window['adaptive'].newBase;
}
function px2rem(p){
    return p / window['adaptive'].newBase;
}

解决方案

楼主可以尝试下这个
https://github.com/imochen/hotcss
原理大概相同

不能识别的原因是因为viewport设置导致微信无法识别，至于是大是小，我忘记了，抱歉

这篇关于javascript - 移动端引用一段缩放的js后，ios设备上的二维码不能识别。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！