上一篇我分享了 rem布局加载闪烁问题,这个问题也是在rem布局经常遇到而且还比较好解决的问题。
但是!注意,这里但是哈!(一般但是都要搞事情)
你有没有遇到过如下这种问题(页面错乱):查看代码,html的font-size设置正常,在浏览器和绝大部分手机上也正常,但是在某些手机上页面元素为什么就大了或小了呢?是rem布局不准了吗?
非也,其实是系统字体大小的问题,这类问题常见于安卓设备上,而且是内嵌在APP里面的H5页面。
问题因素
出现这个问题有几个因素:
1.用rem布局的H5页面
2.页面内嵌在APP的webview中
3.手机 设置 修改了默认字体大小,如下图我的小米手机示例。
满足以上三个因素,在很多手机上都会出现这个问题。
解决方案
方案一(获取系统字体大小)
一般设计稿750px,为了便于计算,我们设1rem = 100px;
也就是1rem = 1 * htmlFontSize
(htmlFontSize 为 html 元素的字体大小),当然在iPhone6 375px宽的屏幕上,htmlFontSize 为50px。
其实,htmlFontSize 除了以px
为单位外,还可以用百分比作为单位,比如你可以设置htmlFontSize的大小为312.5%
,页面的布局效果与设置htmlFontSize 大小为50px
是一样的效果。
那么问题来了,设置为百分比单位的时候,这个百分比值是怎么计算出来的呢?
浏览器默认字体大小为 16px,当我们使用百分比作为根节点 html
的字体大小时,rem 的计算方式就会改为
defaultFontSize = 16px
1rem = 1 * htmlFontSize * defaultFontSize
比如375像素宽设备上:
1rem = 1 * 312.5% *16 = 50 px
这与我们的实际情况相符,但是在有些 Android 手机上,浏览器或 webview 的默认字体是随着系统设置的字体改变的。这样就会导致默认字体大于或小于 16px。从这个思路出发,我们只需要找到系统设置的字体大小就可以正确的计算htmlFontSize的值了。
于是写一个函数来获取defaultFontSize
的值:
//获取系统默认字体大小
//designWidth 设计稿的宽度
//rem2px 设计稿宽度下,1rem的宽度
function adapt(designWidth, rem2px){