Daily conclusion

项目中的日常总结：

iphone移动端点击事件不好使

做移动端音乐播放器时，绑定的点击事件在iPhone没反应，不起效果，安卓上都没问题，事件能正确触发，但是在iPhone没反应。
开始觉得是写法问题，后来发现，是由于iPhone上，点击的对象，必须加上一个样式，拥有cursor:pointer这个样式，就没问题了

setTimeOut和promise.prototype.then()

setTimeOut和promise.prototype.then() 都是异步加载，两个都是等主线程执行完之后，再执行的。

ajax轮询

指客户端与服务器的一个连接方式，踏实定时向服务器发出请求查询数据。通过设置定时器实现一段时间发送请求。
定时器是最简单的ajax轮询方式。

vertical-align

vertical-align默认是baseline，基于底端对齐，center、top；有图片和文字时，将vertical-align设置为top，就可以文字和图片对齐了

.action .action-photo image {
  width: 120rpx;
  height: 120rpx;
  margin-left: 25rpx;
  position: relative;
  overflow: visible;
  vertical-align: top; // 文字基于图片顶端对齐
}

关于rpx

rpx: responsive pixel,可以根据屏幕宽度自适应。

规定屏幕宽度为750rpx。如果在iphone6上，屏幕宽为375px,共有750个物理像素，则750rpx=375px=750物理像素。

一般移动端开发是以iphone6作为视觉稿的标准，因在iphone6上，1rpx=0.5px，方便换算。

注意：在iphone6标准下，1px=2rpx；在电脑测试18px的字体，在小程序中要设置36rpx。

针对uc

1.UC浏览器的touch事件问题

正常的浏览器触发touch事件的顺序都是touchstart、touchmove、touchend，但是UC浏览器中是touchstart、touchmove。没有touchend

原因是android平台的UC浏览器中touchend事件只有在tap（即轻触后立即离开屏幕）时是每次都触发的，滑动后才离开屏幕触发touchend要看手指滑动的方向：左右滑动可以触发touchend，但是上下滑动在没有滚动体的时候是肯定不能触发的，有滚动条的时候，手指离开屏幕的时候，如果滚动条已经到达了顶端或者底端，那么就不会触发touchend事件，其他情况可以触发。

因此为了兼容UC浏览器的页面，选择touchcancel事件。

2.div的class取名为phone，然后被手机的uc浏览器当成广告给屏蔽掉了。(命名需谨慎，如add之类的名字也尽量别取)

3.省流量模式下，border-radius属性不生效。

4.android里的transition属性似乎不生效啊，js也监听不到transitionend、webkitTransitionEnd事件。

transitionend事件会在CSS transition结束之后触发，当transition完成前移除transition，比如移除transition-property属性，事件将不会被触发，如果在transition完成之前设置display:none，事件同样不会触发。

虽然写的uc是支持webkitTransitionEnd，但是实际测试确实不好使。

5.android上的UC会自动屏蔽很多浮层样式，不管用户是否开启了广告屏幕。

6.在移动端如果要给一个input标签设置flex的样式，首先要给它设置display:block;的样式，这样才能让它去自适应宽度。还有input要指定高度，否则手机上输入法弹出来会压缩浏览器的高度，导致input标签变小，当输出法消失之后又会恢复。