<script>
/**
* MobileWeb 通用功能助手,包含常用的 UA 判斷、頁面適配、search 參數轉 鍵值對。
* 該 JS 應在 head 中盡可能早的引入,減少重繪。
*
* fixScreen 方法根據兩種情況適配,該方法自動執行。
* 1. 定寬: 對應 meta 標簽寫法 -- <meta name="viewport" content="width=750">
* 該方法會提取 width 值,主動添加 scale 相關屬性值。
* 注意: 如果 meta 標簽中指定了 initial-scale, 該方法將不做處理(即不執行)。
* 2. REM: 不用寫 meta 標簽,該方法根據 dpr 自動生成,並在 html 標簽中加上 data-dpr 和 font-size 兩個屬性值。
* 該方法約束:IOS 系統最大 dpr = 3,其它系統 dpr = 1,頁面每 dpr 最大寬度(即頁面寬度/dpr) = 750,REM 換算比值為 16。
* 對應 css 開發,任何彈性尺寸均使用 rem 單位,rem 默認寬度為 視覺稿寬度 / 16;
* scss 中 $ppr(pixel per rem) 變量寫法 -- $ppr: 750px/16/1rem;
* 元素尺寸寫法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。
*/
window.mobileUtil = (function (win, doc) {
var UA = navigator.userAgent,
isAndroid = /android|adr/gi.test(UA),
isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 據說某些國產機的UA會同時包含 android iphone 字符
isMobile = isAndroid || isIos; // 粗略的判斷
return {
isAndroid: isAndroid,
isIos: isIos,
isMobile: isMobile,
isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
isWeixin: /MicroMessenger/gi.test(UA),
isQQ: /QQ\/\d/gi.test(UA),
isYixin: /YiXin/gi.test(UA),
isWeibo: /Weibo/gi.test(UA),
isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),
tapEvent: isMobile ? 'tap' : 'click',
/**
* 縮放頁面
*/
fixScreen: function () {
var metaEl = doc.querySelector('meta[name="viewport"]'),
metaCtt = metaEl ? metaEl.content : '',
matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
matchWidth = metaCtt.match(/width=([^,\s]+)/);
if (!metaEl) { // REM
var docEl = doc.documentElement,
maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大頁面寬度
dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
scale = 1 / dpr,
tid;
docEl.removeAttribute('data-mw');
docEl.dataset.dpr = dpr;
metaEl = doc.createElement('meta');
metaEl.name = 'viewport';
metaEl.content = fillScale(scale);
docEl.firstElementChild.appendChild(metaEl);
var refreshRem = function () {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > maxwidth) {
width = maxwidth * dpr;
}
var rem = width / 16;
docEl.style.fontSize = rem + 'px';
};
win.addEventListener('resize', function () {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
} else if (isMobile && !matchScale && (matchWidth && matchWidth[1] != 'device-width')) { // 定寬
var width = parseInt(matchWidth[1]),
iw = win.innerWidth || width,
ow = win.outerWidth || iw,
sw = win.screen.width || iw,
saw = win.screen.availWidth || iw,
ih = win.innerHeight || width,
oh = win.outerHeight || ih,
ish = win.screen.height || ih,
sah = win.screen.availHeight || ih,
w = Math.min(iw, ow, sw, saw, ih, oh, ish, sah),
scale = w / width;
if (scale < 1) {
metaEl.content = metaCtt + ',' + fillScale(scale);
}
}
function fillScale(scale) {
return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';
}
},
/**
* 轉href參數成鍵值對
* @param href {string} 指定的href,默認為當前頁href
* @returns {object} 鍵值對
*/
getSearch: function (href) {
href = href || win.location.search;
var data = {}, reg = new RegExp("([^?=&]+)(=([^&]*))?", "g");
href && href.replace(reg, function ($0, $1, $2, $3) {
data[$1] = $3;
});
return data;
}
};
})(window, document);
// 默認直接適配頁面
mobileUtil.fixScreen();
</script>