移动端浏览器兼容性问题

在开发移动端商城项目的时候，在实现功能和处理bug的过程中出现了一些之前没有见过的问题，在这里记录一下。

1. IOS移动端click事件300ms的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会形成按钮点击延迟甚至是点击失效。这是因为区分单击事件和双击屏幕缩放的历史缘由形成的,javascript

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展现在手机端上，使用了双击缩放(double tap to zoom)的方案，好比你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然能够撑满整个屏幕，可是字体、图片都很小看不清，此时能够快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。css

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。html

缘由就出在浏览器须要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转连接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击连接仍是要双击该部分区域进行缩放操做，因此，捕获第一次单击后，浏览器会先Hold一段时间t。若是在t时间区间里用户未进行下一次点击，则浏览器会作单击跳转连接的处理。若是t时间里用户进行了第二次单击操做，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操做。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。形成的后果用户纯粹单击页面，页面须要过一段时间才响应，给用户慢体验感受，对于web开发者来讲是，页面js捕获click事件的回调函数处理，须要300ms后才生效，也就间接致使影响其余业务逻辑的处理。

解决方案：

• fastclick能够解决在手机上点击事件的300ms延迟
• zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也能够经过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题。

2.一些状况下对非可点击元素如(label,span)监听click事件，ios下不会触发

解决方案：

• css增长cursor:pointer就搞定了。

3. 三星手机遮罩层下的input、select、a等元素能够被点击和focus(点击穿透)

问题发现于三星手机，这个在特定需求下才会有，所以若是没有相似问题的能够不看。首先需求是浮层操做，在三星上被遮罩的元素依然能够获取focus、click、change)，有两种解决方案：

• 经过层显示之后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取git
• 经过将可获取焦点元素加入的disabled属性，也能够利用属性加dom锁定的方式（disabled的一种变换方式）

4. h5底部输入框被键盘遮挡问题

h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用以下方式解决

let oHeight = $(document).height(); //浏览器当前的高度
   
   $(window).resize(function(){
 
        if($(document).height() < oHeight){
         
        $("#footer").css("position","static");
    }else{
         
        $("#footer").css("position","absolute");
    }
   });

5. android微信浏览器需要交互才能触发state事件

使用history.pushState()添加记录后，点击返回会触发state事件，但是在android的微信浏览器中需要产生交互行为后点击返回才能触发state事件。
解决方案：

• 在需要触发state的页面设计一个交互