红米手机H5布局压扁

移动端rem布局样式错乱问题
这段时间在开发app内的h5页面,发现一个奇怪的问题,测试机中有红米手机 ,oppo手机,在app打开h5之后,整个页面被压扁变形了,一开始以为是手机分辨率的问题,但是在同样的手机的其它app内和浏览器内打开页面,都是完全正常显示。

后来查了一下,发现原来是手机字体大小设置的问题,当把字体调大一号时,在app内就正常显示了。现在很多安卓手机的系统都是可以自己去设置系统字体的大小,这就导致用rem布局时,根字体的大小计算错误,样式出现错乱。ios上不会出现这个问题。

解决办法:
Android手机可以给webview配置webview.getSettings().setTextZoom(100)禁止缩放,按照百分百显示。

注意:rem布局在安卓手机中还有一个问题需要特别注意,很多按钮样式我们希望文字可以垂直居中,一般都是用line-height或者padding去处理,但是我们会发现在很多安卓手机里无法垂直居中,这里其实是我们设置的rem单位为奇数造成的。我们在设置font-size,line-height,padding等属性的值时,尽量都是偶数,这样就不会出现这个问题了!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章