微信应用中由于字体设置的问题导致的页面错乱适配

上一篇文章中总结了在手机端怎么通过rem 动态设置html 的fontSize 值，解决手机端的适配问题，但是在微信中有一个特例。

一般情况下，在rem布局中 rem的相对大小只受到html 标签的fontSize 影响，但是在微信中设置字体的大小也会影响到 rem 的比例，所以在微信应用页面中通过rem 适配的页面就会发生一些不可预料的错乱。
为了解决上述问题就需要在动态调取setFont函数时获取到微信调整字体的比例的倒数 scale，然后给rem 的比例还原，为了使rem 的值恢复正常就得和scale想乘。

  function setFont() {let scale = toScale()   //计算出微信字体设置的缩放比例let html = document.documentElementlet k = IBOX.config.designWidth || 640html.style.fontSize = (html.clientWidth / k * 100)*scale + 'px' //乘以scale ,rem的值将恢复正常}

如何获取到scale的大小呢？

思路：1. 通过创建一个div标签设置为不可见宽度设置为 1rem，并获取其宽度 instanceWidth（获取到的宽度是以px 为单位的），这便是缩放之后的宽度，2.再获取html元素的字体大小 htmlFontSize（也是以px为单位的）。正常情况下，1rem 就等于 htmlFontSize，当被缩放后其并不相等，scale = scale = htmlFontSize / instanceWidth

具体实现如下：

(function (win, doc) {function createScaleElement() {   // 创建1rem宽度的不可见元素let scaleDom = document.createElement('div')scaleDom.style.cssText = 'width:1rem;height:0;overflow:hidden;position:absolute;z-index:-2;visibility:hidden;'document.body.appendChild(scaleDom)return scaleDom}if (!win.addEventListener) {return}let scaleDom = createScaleElement()function setFont() {let scale = toScale()let html = document.documentElementlet k = designWidth || 640  // designWidth 为设计稿宽度html.style.fontSize = (html.clientWidth / k * 100) * scale + 'px'}function getOriginalHtmlFontSize() {let rootDom = document.querySelector('html')let fontSize = rootDom.style.fontSize || 16return fontSize}function toNum(fontSize) {if(typeof fontSize === 'string') {fontSize = fontSize.replace('px', '')return Number(fontSize)    }return fontSize}function toScale() {let htmlFontSize = getOriginalHtmlFontSize()let instanceWidth = scaleDom.offsetWidthlet scale = 1if(window.getComputedStyle) {instanceWidth = window.getComputedStyle(scaleDom).width }htmlFontSize = toNum(htmlFontSize)instanceWidth = toNum(instanceWidth)if((typeof htmlFontSize == 'number' && htmlFontSize != 0) && (typeof instanceWidth == 'number' && instanceWidth != 0)) {if(Math.abs(htmlFontSize-instanceWidth)<0.1) {   // 忽略细微的变化return 1}scale = htmlFontSize/instanceWidth    //计算缩放比例}return scale}setFont()setTimeout(function () {setFont()}, 300)doc.addEventListener('DOMContentLoaded', setFont, false)win.addEventListener('resize', setFont, false)win.addEventListener('load', setFont, false)
})(window, document)

由于微信字体大小的设置导致rem布局的微信公众号页面发生错乱的问题总结相关推荐

字体大小的设置_老年人用智能手机，怎样更改字体大小？3种方法，手把手教您学会...
分享生活小妙招,共享科技新生活!大家好,欢迎来到今天的知识分享!我是你们的好朋友小俊! 我们的老年朋友在使用手机时候都会觉得字体太小,导致使用起来非常不方便,那么今天我就教大家三种方法来设置字体大小, ...
微信公众号、内嵌H5字体受微信字体大小影响问题的解决方案
微信公众号.内嵌H5字体受微信字体大小影响问题的解决方案,代码也是之前网上找的,现在记录一下 //微信公众号禁止设置老年字体 ;(function() {if (typeof WeixinJSBrid ...
Foxmail邮件字体大小怎么设置 Foxmail字体的设置方法
Foxmail写邮件的时候,想要设置邮件的字体,和字体大小,该怎么设置呢?下面我们就来看看详细的教程. Foxmail邮件字体大小怎么设置? Foxmail字体的设置方法 1.下载并安装Foxmail ...
python怎么把字体变大_Pycharm 字体大小调整设置的方法实现
一.pycharm字体放大的设置 File ->setting -> Keymap ->在搜寻框中输入increase ->Increase Font Size(双击) -&g ...
怎么调大计算机浏览器内字体,浏览器字体大小怎么设置,教你浏览器字体大小怎么设置-win7旗舰版...
默认浏览器字体大小并不适应所有人,很多用户觉得浏览器初始的字体比较小,但也有部分朋友会觉得字体大,那么电脑中浏览器字体大小怎么设置呢?其实方法也不难,下面小编教你浏览器字体大小怎么设置吧. 1,这是正 ...
html的font字号1-7,CSS 字体大小font-size设置
CSS font-size字体文字大小样式属性-字体大小样式篇: 本节DIVCSS7为大家介绍通过CSS样式设置文字字体大小知识,涉及CSS样式单词font-size. 一.设置字体大小CSS单词与语 ...
win7计算机字体大小怎么设置,新手使用win7系统中设置桌面的字体大小的方法
win7的系统是现在很多的小伙伴安装系统的时候最好的最好的选择,那在win7电脑中对于新手来说一些操作还是不知道的,有疑问对于字体大小的是怎么自己修改字体还有文字的大小是怎么实现的呢,对于这个问题今天 ...
苹果手机字体大小怎么设置？简单实用，轻松学会
使用苹果手机的时候,发现苹果手机的字体看起来不是很舒服,想要将字体调大一点,却不知道怎么办.苹果手机字体大小怎么设置?其实方法很简单,今天小编就来具体的讲一下调整苹果手机字体大小的方法. 苹果手机字体 ...
电脑桌面计算机怎么设置,电脑桌面字体大小怎么设置？
电脑越来越普及,现在不少用户家里的爷爷奶奶也开始学习电脑使用了. 但电脑默认设置的文字并不太适合老人家观看的. 那么我们要怎样才能设置电脑桌面字体大小呢? 今天就给大家分享下电脑桌面字体大小的设置方法 ...

由于微信字体大小的设置导致rem布局的微信公众号页面发生错乱的问题总结

微信应用中由于字体设置的问题导致的页面错乱适配

由于微信字体大小的设置导致rem布局的微信公众号页面发生错乱的问题总结相关推荐

最新文章

热门文章