一个热爱网络的年轻人的博客
刚做移动端页面的时候，看到一些成熟的网页做淡入淡出的弹窗遮罩效果，都喜欢用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。