hbxeagle / rem

rem adapt
535 stars 137 forks source link

关于4.1的问题 #8

Open xiaomaisu opened 7 years ago

xiaomaisu commented 7 years ago

不好意思,想问下我在chrome上模拟手机端,发现4.1的方案是ok的,而且在w3c中对rem的明确定义就是the root element 的font-size,屏宽等均和你readme中的一致,想问下你的是在哪个手机下出现4.1不可以的情况的

hbxeagle commented 7 years ago

华为 C8818的默认浏览器

xiaomaisu commented 7 years ago

ios下调整微信字体大小,页面样式有变化,但是获得的html的默认字体大小仍是16px,不知道有没有遇到这个问题

hbxeagle commented 7 years ago

ios设备,以及微信里面都不会随系统字体大小改变html的默认字体大小,主要是一些Android的默认浏览器和这些Android设备的客户端的webview里面有。

xiaomaisu commented 7 years ago

那ios仍然会存在问题,这个没办法解决是么,还有一个刚刚在华为p6上展示最终方案时,出现设置前1rem的宽度:undefined的情况,目前没有在其他手机上出现过这个问题

hbxeagle commented 7 years ago

华为p6上的问题可能是 d.remove() 这个bug导致的,已经修改。ios不清楚你说的是什么问题。

xiaomaisu commented 7 years ago

undefined的问题解决,但是h.style.fontSize为""导致6.4rem的计算值为NaN

xiaomaisu commented 7 years ago

还是只有华为p6出现这个问题..

hbxeagle commented 7 years ago

h.style.fontSize是因为使用了css设置html标签的font-size,所以获取不到,不影响使用。去掉document.documentElement.style.fontSize 这行的注释即可(于css设置有冲突所以实际使用中要注释掉)。

xiaomaisu commented 7 years ago

华为p6调整浏览器字体大小后4.1的偏差比4.2小...(不好意思,最近总打扰..),4.2显示为: 设置前html的font-size:26px 设置前1rem的宽度:25 html fontSize的设置值为:225% 设置后的fontSize:58px

hbxeagle commented 7 years ago

不打扰,交流才能有获得,

4.1的方案中使用的是getPropertyValue('font-size'),这个值浏览器会四舍五入为整数,其实是不精确的。 var htmlFontSize = parseFloat(window.getComputedStyle(h, null).getPropertyValue('font-size')); document.documentElement.style.fontSize = window.innerWidth / designWidth rem2px / htmlFontSize 100 + '%'; 4.2的方案中使用的是计算一个1rem的div的getPropertyValue('width'),这个值是个精确值,会保留小数部分。 var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width')); document.documentElement.style.fontSize = window.innerWidth / designWidth rem2px / defaultFontSize 100 + '%';

源码中font-size的值和width的值都会有同样的问题,所以要看1rem目标值和1rem实际值之间没有差值或差值比较小才是精确的。

xiaomaisu commented 7 years ago

恩,这个我知道,

但是显示出来的6.4的计算值[按设置后的fontSize计算]是371px左右,而期望得到的是360px左右 最后一行的结论在我所提到的那款手机上width的精度要低于font-size的值,而且6.4rem的实际宽度是按font-size的值而非width的值来计算的 下图是4.2方案的截图图片cdn地址 而且根据上图可知,设置前1rem的宽度并不是设置前html的fontSize的精确值,25和26之间不是四舍五入可以得到的结果

xiaomaisu commented 7 years ago

Mozilla/5.0 (Linux; U; Android 4.2.2; zh-cn; HUAWEI P6-U06 Build/HuaweiP6-U06) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30,这是对应的user agent.融合搜索的浏览器

hbxeagle commented 7 years ago

你用的这个浏览器华为的应用市场都已经下架了吧,没有找到p6,6p测试没问题,orz... 设置系统字体「特大」的时候不会影响到浏览器,我测试设置前html的fontSize也就是21px,没到26px的情况。

marsbaiyun commented 7 years ago

华为C8817,OPPO R9M,你值得拥有(都会出现这种情况)