解決iphone6上的rem適配問題及字體被變成宋體的問題

js判斷系統添加標識

if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
		

        /* 添加IOS標識 */

        doc.documentElement.classList.add('ios');

        /* IOS8以上給html添加hairline樣式，以便特殊處理 */

        if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)

            doc.documentElement.classList.add('hairline');

    }
複製代碼

我以前是這樣寫的字體樣式font-family:"Microsoft Yahei" !important;iphone上面他喵的不識別沒有生效因而就只有這樣

font-family: "微軟雅黑" !important;
複製代碼

下面是完整的remjs代碼須要用的時候引入便可

!function (window) {

/* 設計圖文檔寬度 */

var docWidth = 750;

var doc = window.document,

    docEl = doc.documentElement,

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';



var recalc = (function refreshRem () {

    var clientWidth = docEl.getBoundingClientRect().width;

    /* 8.55：小於320px再也不縮小，11.2：大於420px再也不放大 */

    docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';

    return refreshRem;

})();



/* 添加倍屏標識，安卓倍屏爲1 */

docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);



if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
	

    /* 添加IOS標識 */

    doc.documentElement.classList.add('ios');

    /* IOS8以上給html添加hairline樣式，以便特殊處理 */

    if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)

        doc.documentElement.classList.add('hairline');

}



if (!doc.addEventListener) return;

window.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);



}(window);
複製代碼