微信字号调整问题 html,微信H5适配解决微信调整字体大小导致Html5页面混乱

最近开发公众号遇到一个问题：

iOS、Android 加载页面，如果用户调整了微信自带的字体大小，那么我们的页面就会跟随调整字体大小，导致页面错乱无法适配。所以希望能够禁止微信的字体放大功能。

找了一些方法总结如下：

原理：阻止ios和安卓调整字体大小时候的事件，ios通过添加css属性，安卓通过微信属性去阻止。

iOS系统禁止微信客户端修改字体大小：

/* iOS禁止微信调整字体大小 */

body {

-webkit-text-size-adjust: 100% !important;

text-size-adjust: 100% !important;

-moz-text-size-adjust: 100% !important;

}

Android 则通过js 调整：

// 强制禁止用户修改微信客户端的字体大小

(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 });

});

}

})();

微信字号调整问题 html,微信H5适配解决微信调整字体大小导致Html5页面混乱相关推荐

解决微信调整字体大小导致Html5页面混乱
原理:阻止ios和安卓调整字体大小时候的事件,ios通过添加css属性,安卓通过微信属性去阻止注:添加后无法通过外部更改字体大小,根据项目需求运用 ios系统: body{-webkit-text- ...
防止用户调整微信浏览器字体大小导致的显示异常
防止用户调整微信浏览器字体大小导致的显示异常(加JS代码) // 下面这段代码,防止用户调整微信浏览器字体大小导致的显示异常 (function() {if (typeof WeixinJSBridg ...
h5 android 字体设置,解决因为手机设置字体大小导致h5页面在webview中变形的BUG
解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置 ...
微信公众号自动回复服务器数据,[终极方案]解决微信公众号服务器配置启用后无法自动回...
在配置服务器配置时Token验证通过后,遇到给公众号发信息,提示:提示该公众号提供的服务出现故障,请稍后再试的问题,一直实现不了自动回复的功能.百度了大量的资料,参考了开发文档,尝试了n种办法,检查 ...
微信小程序java中文乱码_如何解决微信小程序显示中文无法上传或者出现乱码的问题？...
今天小编给大家讲解如何解决微信小程序显示中文无法上传或者出现乱码的问题?有需要或者有兴趣的朋友们可以看一看下文,相信对大家会有所帮助的. 在formData中对文字进行编码,使用encodeURI() ...
Android 屏幕适配（修改系统字体大小、显示大小、修改分辨率相关适配）
Android实际开发中会遇到各种各样的机型,所以就需要对多种机型进行适配.常见的适配在这类就不详细介绍了,大家可以参考这里的系列文章Android通用屏幕适配讲解的已经很详细了.下面说的是:当修改系 ...
微信小程序中的iPhone X适配解决
原因: 微信小程序在适配iphone x 的时候底部的横线会出现遮挡如图: 解决方案: 步骤一:在app.js文件中创建全局变量,然后获取设备型号 globalData: { isIp ...
解决h5 开发，设置手机字体大小微信设置字体大小页面变形问题
1 https://www.cnblogs.com/luoyihao/p/12385975.html 1 ios系统: body{ -webkit-text-size-adjust: 100% !im ...
php微信端获取头像不显示不出来,解决微信转发到朋友圈没有获取页面头像以图标展示。...
http://203.195.235.76/jssdk/#menu-webview 微信JS-SDK demo https://mp.weixin.qq.com/debug/cgi-bin/sand ...

微信字号调整问题 html,微信H5适配解决微信调整字体大小导致Html5页面混乱

微信字号调整问题 html,微信H5适配解决微信调整字体大小导致Html5页面混乱相关推荐

最新文章

热门文章

微信字号调整问题 html,微信H5适配 解决微信调整字体大小导致Html5页面混乱

微信字号调整问题 html,微信H5适配 解决微信调整字体大小导致Html5页面混乱相关推荐

最新文章

热门文章

微信字号调整问题 html,微信H5适配解决微信调整字体大小导致Html5页面混乱

微信字号调整问题 html,微信H5适配解决微信调整字体大小导致Html5页面混乱相关推荐