移动端 WebView 是一个基于 webkit 引擎、展现 web 页面的控件。这里总结一些移动端 Webview 的设置，及一些兼容总结。
-
- display
- backface-visibility
- line-height
- transition 闪屏
- background-color
- 不支持border-radius 缩写
- touchmove事件
- 伪类 active 生效
- 禁用系统默认菜单
- 禁止用户选中文字
- css3动画兼容
- 软键盘与position定位
- 不建议使用jquery和zepto实现的动画
- 使滚动更流畅
- 对于渐变的处理
- 低端手机加载怪异
- 某些三星手机不支持background属性简写
- IOS8 系统不支持 flex 布局
- 电话号码识别
- 禁止文本缩放
- 设置添加到主屏幕的 web wpp 图标
- 添加到主屏幕时隐藏地址栏和状态栏
- IOS在页面回退出现空白遮挡问题
- input输入时弹出键盘导致页面整体上移键盘框消失后页面不能回弹的问题
- ios日期转换出现NAN问题
在安卓移动端使用Webview组件的时候，如果组件一些参数没有设置支持，很多功能导致无法使用，比如无法加载js，无法使用缓存等，这时就需要在Webview组件做一些配置，先获取WebSettings settings = getSettings()，最后看下面做的一些例子。
设置为utf-8
settings.setDefaultTextEncodingName("utf-8");
settings.setLoadsImagesAutomatically(true);
默认设置为true,即允许在File域下执行任意JavaScript代码
settings.setAllowFileAccess(false);
默认关闭
settings.setMediaPlaybackRequiresUserGesture(false);这个设置在 JELLY_BEAN(android 4.1) 以前的版本默认是允许，在 JELLY_BEAN 及以后的版本中默认是禁止的
settings.setAllowFileAccessFromFileURLs(false);包括其他的文件和 http，https 等其他的源，这个设置在 JELLY_BEAN 以前的版本默认是允许，在 JELLY_BEAN 及以后的版本中默认是禁止的。
settings.setAllowUniversalAccessFromFileURLs(false);默认为true，改为false，避免造成用户的个人敏感数据泄露
settings.setSavePassword(false);默认关闭缓存
settings.setAppCacheEnabled(false);// 不使用网络，只读取本地缓存数据
settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);
// 不使用缓存，只从网络获取数据
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
// 根据cache-control决定是否从网络上取数据
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
// 只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); settings.setDomStorageEnabled(true);settings.setUseWideViewPort(true);settings.setSupportMultipleWindows(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
在APP下需要经过Webview展示和加载网页，相当于把Webview当作一个浏览器，而Webview就是一个简易的浏览器很多H5特性等功能还不怎么支持，就会遇到各种各样的坑。
三星 I9100（Android 4.0.4）不支持display:-webkit-flex这种写法局，但支持display:-webkit-box。
- 实现CSS伪类 :active 生效，给 document 绑定 touchstart 或 touchend 事件，或者给body添加ontouchstart=""
// body添加ontouchstart=""
<body ontouchstart="" style="display: none">
// document 绑定 touchstart
document.addEventListener('touchstart',function(){},false);
IOS长按 a，img 标签长按出现菜单栏
-webkit-touch-callout:none;
-webkit-user-select:none;
// 方法一
-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
// 方法一
-webkit-backface-visibility: hidden;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
-webkit-backface-visibility: hidden；兼容性，当遇到遮罩层 background-color:rgba(); 和用到 -webkit-backface-visibility: hidden;属性，会到时app，Webview闪出黑色边线。
在安卓4.4版本之前，Android Webview基于WebKit内核的实现的，需要加上-webkit前缀。
@-webkit-keyframes
Android 4.2.x 背景色溢出及不支持 border-radius 缩写
- 可以用图片代替圆角来实现
- 尝试不使用css简写模式
// 完整写法
border-left-radius: 999px; /* 左上角 */
border-right-radius: 999px; /* 右上角 */
border-right-radius: 999px; /* 右下角 */
border-left-radius: 999px; /* 左下角 */
部分手机（r7，酷派，索尼）对background-color:rgba()的背景透明度跟标准不一样，实践比标准颜色会深些， 针对这些手机要利用到媒体查询来给这些属性作针对性修改调整。
touchmove事件在Android部分机型(如LG Nexus 5 android4.4，小米2 android 4.1.1)上只会触发一次 解决方案是在触发函数里面加上e.preventDefault(); 记得将e也传进去
在Webview开发中，获取焦点，弹出输入框，软键盘弹出，如果弹出输入框使用了固定定位，固定在底部的状态下，当用户使用的是第三方软键盘，例如QQ拼音等，输入框会被遮盖，体验极差，在我们现有技术认知水平情况下，采取的方案是被动妥协的，我们的建议是在产品设计原型上，尽量回避输入框元素出现在页面最底部的场景，例如输入框固定在顶部，或者采用了页面转场模式。
在低端安卓手机会有各种卡顿，闪屏的bug
line-height经常用于文字居中，不同手机显示效果不一样。什么鬼～ 在chrome模拟器上又是显示得非常完美，但是！Android和IOS又各自‘偏移’了。如果把line-height加1px，iPhone文字就会稍微‘正常显示’，由于我们app的ios用户居多，并且android机型太多，不同机型也会显示不同，所以只能退而求其次了。line-height的兼容问题不太好解决，容器高度越小，显示效果的差距越明显。 解决方案：稍微大一点的高度，最好把line-height设置为高度+1px，两个平台显示都不会太‘奇怪’。
-webkit-overflow-scrolling:touch;有时候UI里面会有一些渐变的效果，这个时候可以用一个在线的工具，生成渐变的CSS，但是这个需要自己手动调一个和UI一模一样的效果，或者可以直接给UI调一个它理想的效果，它会生成兼容性很强的CSS： 在线工具
渲染不是从上到下，而是竖现出来，超怪，可以延迟加载网页，解决出现怪异的加载效果
// 不支持：
background: url(../img/icon.png) no-repeat 0 0/contain;
// 需改成
background-image: url(../img/icon.png);
background-repeat: no-repeat;
background-size: contain;safari 使用的是 webkit内核，在Ios8上需要单独加一下兼容才能起作用
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items:center;
-webkit-align-items: center;在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的- 数字处理为电话链接，比如：
- 7位数字，形如：1234567
- 带括号及加号的数字，形如：(+86)123456789
- 双连接线的数字，形如：00-00-00111
- 11位数字，形如：13800138000
1、关闭电话号码识别
<meta name="format-detection" content="telephone=no" />2、开启拨打电话功能
<a href="tel:88888888">88888888</a>3、开启发送短信功能：
<a href="sms:88888888">88888888</a><input type="text" autocapitalize="off" />当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：
html {
-webkit-text-size-adjust: 100%;
}当我们将一个网页添加到主屏幕时，除了会需要设置标题之外，肯定还需要能够自定义这个App的图标，代码如下：
<link rel="apple-touch-icon" href="logo.png" />当我们将一个网页添加到主屏幕时，会更希望它能有像 App 一样的表现，没有地址栏和状态栏全屏显示，代码如下：
<meta name="apple-mobile-web-app-capable" content="yes" />// main.js
router.afterEach(() => {
// 通过滚动到顶部来消除空白遮挡
window.scrollTo(0, 1);
setTimeout(() => {
window.scrollTo(0, 0);
}, 0);
});
部分手机通过input输入时弹出键盘导致页面整体上移键盘框消失后页面不能回弹，按钮不能点击
当输入框元素失去焦点时滚动设置0即可
document.body.scrollTop = 0 || document.documentElement.scrollTop = 0;
将日期字符串的格式符号替换成'/'
eg：'yyyy-MM-dd'.replace(/-/g, '/')