1.rem.ts页面
/**
* 使用css rem单位适配各种手机屏幕
*/
;
(function (doc:any, win:any) {
// 用原生方法获取用户设置的浏览器的字体大小(兼容ie)
var user_webset_font
if(doc.documentElement.currentStyle) {
user_webset_font=doc.documentElement.currentStyle['fontSize'];
}
else {
// @ts-ignore
user_webset_font=getComputedStyle(doc.documentElement,false)['fontSize'];
}
// 取整后与默认16px的比例系数
var xs=parseFloat(user_webset_font)/16;
// 设置rem的js设置的字体大小
let viewJssetFont
let resultFont
let docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
clientWidth,
recalc = function () {
clientWidth = docEl.clientWidth
if (!clientWidth) return
if (!doc.addEventListener) return
if (clientWidth < 750) {
// 设置rem的js设置的字体大小
viewJssetFont = 100 * (clientWidth / 750)
// 最终的字体大小为rem字体/系数
resultFont = viewJssetFont / xs
// 设置根字体大小
docEl.style.fontSize = resultFont + 'px'
} else {
docEl.style.fontSize = 100 + 'px'
}
}
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
2.index.html页面添加
<script>
(function () {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function () {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
});
}
})();
</script>
<style>
/* IOS禁止微信调整字体大小 */
body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
</style>