仅记录自己在开发中遇到的问题,持续更新。
当页面中有img标签时,需要特别注意src属性的设置。 工程中img标签的写法是:
<img src="" />
,在有的浏览器中(华为手机 Android4.2.2)页面会加载两次,造成比较诡异的错误。在stackoverflow上有类似的问题。cookie的编码问题。 如果cookie的值为中文,那么在某些手机(华为手机 Android4.2.2)会出现乱码问题;需要在设置cookie时进行一次编码,获取时解码。
注意transform、flex等比较新的css3属性的设置。 transform和-webkit-transform要一起存在;flex和-webkit-flex、-webkit-flex-box等属性也要一起存在,可以通过postcss进行设置。
在webpack配置中,需要注意postcss的顺序:
loader: ExtractPlugin.extract( "style", "css?minimize&-autoprefixer!postcss!sass" ) // 抽取共有的css
如果postcss放在最后,需要引入postcss-scss。
尽量采用css3硬件加速。
在一些比较老的手机(如:三星Note2)中,在动画前对某元素设置了
display:none
,但是它还是会显示;如果一定时间的延迟后再开始动画,元素可以正常的被隐藏掉。 这可能是因为浏览器性能不足,没有进行repaint操作;可以通过3D加速尝试下。