H5在安卓和ios设备上的兼容性问题_h5兼容android老机型问题

1. ios 表单元素 input 和textarea 默认有内阴影

// css 
input{
  -webkit-appearance: none;
}
1
2
3
4

2. ios上input的focus()、autofocus无效处理

出现的原因：ios的安全机制，必须要用户自己触发。

解决方案：
1）原生方法解决。
修改app的配置文件config.xml。ios的UIWebView 默认的KeyboardDisplayRequiresUserAction为false，设置为true就行，WKWebView 不支持这个属性。
<preference name="KeyboardDisplayRequiresUserAction" value="true" />

2）H5若是通过页面任何地方的点击事件使弹出的input框自动获得焦点。可以通过：this.$refs.refName.focus()。
注意：此时input框不能是v-if或v-show动态控制的，可以设置为样式透明的透明度或z-index来控制。

ios上，若是一进入页面就使页面的input框自动获得焦点，我试过很多网上的方法，H5暂时还没找到有效的解决方案。

3. ios上长按事件会出现选中文字和弹出默认菜单

出现原因：ios的系统事件

对长按块区域文字选中的解决方案：
*{
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-o-user-select:none;
}

默认菜单栏解决方案：
1）可以通过原生解决。但是原生是针对整个app，好像整个app中每个页面长按都不会出现默认菜单了。
使用WKWebView时OC调JS的user-select属性控制用户操作

// 页面加载完成之后调用

- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation {

    // 不执行前段界面弹出列表的JS代码

    [webView evaluateJavaScript:@"document.documentElement.style.webkitTouchCallout=‘none‘;" completionHandler:nil];

    [webView evaluateJavaScript:@"document.documentElement.style.webkitUserSelect=‘none‘" completionHandler:nil];

}
1
2
3
4
5
6
7
8
9
10
11

2)可以通过js解决。在activated中添加代码：
document.documentElement.style.webkitTouchCallout=‘none‘;// 不弹出默认菜单
document.documentElement.style.webkitUserSelect=‘none‘； // 不选择文字

4. touch事件和click事件混用 出现的bug

1）问题描述：
父元素用touch事件（因为父元素块会出现长按、移动和点击事件，所以分别用了touchstart、touchmove、touchend事件），子元素是相对父元素的绝对定位，位置有重叠，用的click事件。
在华为手机上，会出现：点击子元素，只执行了父元素的touchstart事件。

问题分析：
穿透肯定会存在，但是click.stop阻止了穿透。苹果和手机都是会执行click事件。所以分析原因，可能是移动端click事件存在300ms延迟，它对穿透事件的阻止，也要300ms后有效，所以先执行了父元素的touch事件？

解决方案：将click.stop事件改成touchstart.stop或touchend.stop事件。

2）问题描述2：touch事件点击弹出框，弹出框有取消和确认按钮，取消和确认按钮为click事件。当touch事件元素的位置和弹出框取消按钮重叠时，会出现：touch按钮一触发，取消按钮事件也触发了，所以弹窗框闪现。与确认按钮重叠时，touch事件一触发，确认按钮也触发，并且确认按钮中写的删除事件也生效。（在touch按钮按的非常快的情况下，就不会出现上述情况）

问题分析：touch事件没有延迟，所以一触摸马上就出现了弹框，而点击touch事件的元素过慢（超过300ms），马上引发了弹框上该位置的click事件触发。

解决方案：统一click事件或touch事件

所以，移动端上最好不要将touch事件和click事件混用，血的教训。

5. ios页面内点击事件弹框 页面底部带出白框

出现原因：
页面内部撑开的高度没有达到视图高度的100%（即一整屏），弹框的时候没有撑开的高度出现了ios默认背景色白色。设的页面高度100%，不弹框的时候背景色满屏也是我设的颜色。弹出框使得ios页面100%高度变成了页面撑开那部分高度的100%，剩下部分就出现了ios的默认白色背景色。
解决方案：父元素设置最小高度min-height:100vh；，页面内部高度没有达到一整屏，也保证整屏高度内都是都是自己设的背景颜色。

只有ios上遇到了这个问题。

6. ios上键盘弹出会将页面往上顶

出现原因：ios上的软键盘会使页面的fixed定位失效。
解决方案：可以监听resize事件（浏览器窗口大小调整时触发），当键盘弹出的时候，更改页面的position属性值。