一个热爱网络的年轻人的博客
刚做移动端页面的时候,看到一些成熟的网页做淡入淡出的弹窗遮罩效果,都喜欢用css里transition、visibility和opacity这三个属性,通过改变他们的值,结合js增减class即可,非常方便。上周做的一个项目,开发找我报bug,说是一个界面出不来,我看了下就是这段代码。然后重新测试了一下,发现这段代码在iOS8、9、10都有问题,之前为什么都没发现?
我的一个项目,开发那边遇到一个bug,他的小米手机UC浏览器里操作消息数目的时候,消息数字永远不出来,然后从别的页面切回去,再回来,就有了。发现我两个Android设备的UC都有这个bug。排查到最后,发现同事在公共代码里加了一句类似:empty{display: none;}代码,最后发现是这家伙的问题。
移动端里对悬浮效果支持不是很好。例如PC端里很常见的页面滚动到一定距离,导航悬浮效果,页面scroll的时候计算滚动条和顶部距离,加fixed就可以了。但移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行。所以手机里这个效果,得等到页面停止滚动,导航才会悬浮。
PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧。目前大部份设备,包括但不限于iOS 5+、Android 2.3+、Window Phone 8+都是可以兼容的,具体兼容表请看caniuse。