在做H5APP时的高清屏解决方案

Posted 2020-12-11 聪明的笨小孩

// 高清屏解决方案

(function (baseFontSize, fontscale) {

var _baseFontSize = baseFontSize || 100;

var _fontscale = fontscale || 1;

var win = window;

var doc = win.document;

var ua = navigator.userAgent;

var matches = ua.match(/android[Ss]+AppleWebkit/(d{3})/i);

var UCversion = ua.match(/U3/((d+|.){5,})/i);

var isUCHd = UCversion && parseInt(UCversion[1].split(‘.‘).join(‘‘), 10) >= 80;

var isios = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);

var dpr = win.devicePixelRatio || 1;

if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {

// 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;

dpr = 1;

}

var scale = 1 / dpr;

var metaEl = doc.querySelector(‘meta[name="viewport"]‘);

if (!metaEl) {

metaEl = doc.createElement(‘meta‘);

metaEl.setAttribute(‘name‘, ‘viewport‘);

doc.head.appendChild(metaEl);

}

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

doc.documentElement.style.fontSize = _baseFontSize / 2 * dpr * _fontscale + ‘px‘;

})();