问题记录:
20210118,记录一下一个小问题,收到来自同事的bug反馈,说我们的H5页面,在微信内置浏览器下显示有问题,然后丢了个图过来,发现里面文字很大,文字的位置也有点偏移,立刻联想到是用户把字体调大了,变成“老年模式”。这里我随便找个页面重现下类似的错乱效果,如下图
简单写了个测试页面(rem布局),拿安卓和 ios 分别测了下,如下动图
从上面两张动图可以发现:
1. 安卓手动调整字体的话,会使根元素的字体变化,导致整个页面内的元素的一些属性变化,包括宽高字体等样式属性
2. ios 手动调整字体,只是单纯的把文字的字体改变,并没有改变根元素字体
从上面的发现,我们的页面相对于 ios 来说,如果页面不复杂,在安卓下,显示一般不会有太大异常,只是看到了页面所有的元素都是被放大了。而在 ios 下,在一些元素定宽定高,并且加了 overflow:hidden 这样的样式属性,则调整字体可能会出现文字被切割了,只显示文字的一部分,就像这样: ios下调大字体后→ ,不知道的人还以为是 “天汪”🤣
解决办法:
通过搜索工具查找相关内容,发现微信有一个可以覆盖菜单里面“调整字体”功能的接口,不过我找了一下暂时没有找到文档入口,尤其是这个 setFontSizeCallback 希望有知道的可以说一下
(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 (e) { WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 }); }); } })();
上面这部分的代码我测试后,对 ios 和安卓有效果,在调整字体里面,拖动滑块,并没有对页面产生影响。
在 ios 下还可以使用这个 css 属性
body { -webkit-text-size-adjust: 100% !important; }
这个属性(实验性功能),设置为100%,是为了关闭字体大小自动调整功能。一般来说,安卓和 ios 的浏览器,当我们横向或者纵向显示时,浏览器会自己改变当前字体,以达到一个方便阅读的效果。所以设置为100%,保持不变 (个人理解)。MDN对这个样式属性的一些说明:https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-size-adjust
解决后的效果
加入那些代码后,安卓和 ios 均不会受右上角菜单的“调整字体”功能的影响,如下图所示
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。