hotcss.js Flexible 移动端适配在dpr=2和dpr=3出现的字体大小设置不正确问题.

  这段时间一直在用hotcss做移动端适配,做了几个页面没有发现什么问题,后来老大要加快进度,我把项目分出一块给另一个同事做,她发现了一个问题就是字体在dpr=2,dpr=3,的设备上字体大小显示老是不正确.

 

字体明明设置的是34px;computed完成之后偏偏显示的是38.44px;比实际大了不少,并且查找了好多资料页没解决问题,

后来看了下别人的例子,像下边这样写就会显示正确.

,

 

加了max-height: 100%; display: block;这2个属性突然就好了.测试了下发现,只要将dom元素设置成能设置大小的元素就可以,包括float:left;inline-block等,再加上max-height: 100%;就解决了.

虽然原理没去研究,猜测应该是dpr缩放导致元素计算错误的.

 今天又研究了一下,发现只要将max-height: 100%; 加到body下,最高级的父元素问题就解决了,如图:

 

这样不管他下边元素是什么display格式的都可以,亲测非常方便.
但是试了下加到body上不行.

过了这么长时间,用以上方法解决后,发现这个问题又出现了,在安卓手机UC浏览器上字体大小还是不正确,会变很大.

目前我的解决办法是将元素的高度写死,display为inline-block,block.或者float:left;

发现此问题的朋友们可以根据实际环境去调整.有谁发现更好的办法.可以在下方评论分享给大家.