解决移动设备的字体被放大,导致页面排版错乱
在开发移动端页面的时候,之前一直没有测出这个问题。直到某天,在领导的手机上出现了排版错位的问题,拿着手机质问我的工作态度。
百度了一下发现,原来浏览器调整了字体大小,会放大网页的字体,从而导致排版混乱。通过设置可以禁止网页字体被放大:
禁止微信端字体放大(JavaScript脚本):
(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 });
});
}
})();
禁止浏览器字体放大(CSS样式):
body {
-webkit-text-size-adjust: 100%!important;
-ms-text-size-adjust: 100%!important;
-moz-text-size-adjust: 100%!important;
text-size-adjust: 100%!important;
}
text-size-adjust
用来控制一些移动设备上的文本溢出算法。
不过,根据 MDN 网站的介绍,text-size-adjust
还是实验中的功能,不是所有的浏览器都会生效。