一些移动 Web 前端开发上的要点记录

从五月份实习到现在快三个月了，这三个月的实习时段，按照leader 的要求，每天要写日总结发RTX 内部群，每周都要写周邮件群发整个部门——就这么坚持了三个月。个人不是很赞同写日总结也写周总结的做法，但实在是拗不过leader ，不过坚持下来也发现没那么难——虽然写周总结邮件常常词穷。
这篇文章其实是摘录之前写的周邮件的内容，记录的是实习做的项目遇到的一些bug 之类的。毕竟本站也鲜有更新，就拿过来凑成水文一篇吧。

1、-webkit-text-size-adjust 中的问题

在做游戏页面的时候，按照设计稿将font-size 设置为10px，在Chrome 下遇到了小于12px 无法调试的问题。根据老经验知道可以用-webkit-text-size-adjust 调整，但居然无效，搜索才发现原来早在Chrome 37+ 就取消了-webkit-text-size-adjust 属性（据说被滥用）。

2、:active 伪类在某些移动设备下失效的问题

在做某个游戏宣传页面按要求添加个点击按钮的状态样式的时候遇到这个问题。解决方法一：；方法二：document.addEventListener("touchstart", function(){}, true);。原因是在移动设备上，:active样式会在 touchstart的时候就触发，而我们常常想要的效果是在用户真正去点击它的时候触发。

3、伪元素失效的问题

做某个宣传页面，在实现弹窗+遮罩层的样式时候，为了体现语义化一个div 表示弹窗部分+遮罩层，打算用伪元素（::after或::before）实现遮罩层，但居然无法生效，后经过同事秒指点跟搜索，了解到必须设置content 属性才能生效，不然真的是成了“伪”元素了。

4、iOS 下微信不能识别二维码的问题

这部分的问题我已经写成了篇文章了并延伸了下，详见《微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案》 。

5、对于display:inline(inline-block) 与float:left 水平对齐方式的区别及适用场景没有了解透彻的问题

在某页面部分内容的时候，插件页面表格那里开发要实现以底部基线来对齐的方式，之前用float 则是顶部为基线。回来后查阅了资料重新熟知了下。

6、点击事件后切换页面的延时非常长的问题

在进行某演示Demo 页面的构建工作的时候，发现点击事件后切换页面的延时非常长，排查来排查去都几乎无果；最后才偶然发现将图片压缩下就好了（一开头设计给我的图是1000+px 宽度的，我没做处理直接拿来用，写的时候CSS 放缩处理至320px 宽，每张图约700KB，想着既然本地开发状态，图片大点也没多大问题）。后面突然想到性能优化中有一条关于图片按需尺寸使用，尽量少用CSS 放缩；可见就是犯了这个错误了。

7、伪元素使用CSS3 动画在移动浏览器的支持情况

在做某游戏宣传页面的的时候发现在安卓下微信（包括UC、QQ部分浏览器）下存在伪元素不支持CSS 动画的问题，解决方式是不要用伪元素。后面测试了伪元素动画在Android 下的移动浏览器的支持情况：支持：360、Firefox；不支持：微信内置浏览器、UC、QQ

8、视网膜屏幕下的1px 还原问题

因iOS 设备独特的视网膜屏幕，视觉稿上的1px 需要采取额外的方式写出。网络上有多种方法，结合过去的团队经验，使用的是：通过媒体查询，然后采用CSS 的scale属性进行放缩来达到视觉还原 的方法。

核心代码如下：

 
.div:after {
    border-top: 1px solid #e0e0e0;
    content: ' ';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
 
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
    .div:after {
        -webkit-transform-origin: left bottom;
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
    }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    .div:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}