CSS

 * {
    /*禁止长按选中*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*阻止ios下点击区域变暗*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

img{
    /*阻止长按图片另存为*/
    pointer-events:none
}

播放音频

ios下无法自动播放音频

ios下只能通过用户交互播放音频,无法自动播放,但在wx中可以通过如下方式解决

//预加载,且ios下必须通过该方式先加载一遍,才能正常播放音频
document.addEventListener("WeixinJSBridgeReady", function () {
  //微信加载完毕,不同于wx.ready,不需要config
  document.getElementById('over').play();
}, false);

刷新页面

Android只能使用window.location.href = location.href，IOS只能使用window.location.reload()

var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
  window.location.href = location.href;
}
if (isIOS) {
  window.location.reload()
}

禁用video自动全屏

IOS

在ios下video一旦播放就会自动全屏,且自带进度条和暂停键等,此时若想屏蔽该功能,可以加上

playsinline="true" webkit-playsinline="true"

官网API

You must set this property to play inline video. Set this property to true to play videos inline. Set this property to false to use the native full-screen controller. When adding a video element to a HTML document on the iPhone, you must also include the playsinline attribute.

Apps created before iOS 10.0 must use the webkit-playsinline attribute.

安卓

x5-playsinline="true" x5-video-player-type="h5"

使用overflow:auto和scroll时出现滑动不顺畅问题

为overflow: scroll元素增加属性 -webkit-overflow-scrolling: touch;,可启用硬件加速,变得顺畅。
给予子元素一个min-height，大小不限，帮助浏览器建立ScrollView。

禁用微信浏览器橡皮筋效果

给html和body固定定位 (但是会造成页面无法滚动)
禁用touchmove默认事件

document.body.addEventListener('touchmove', function (e) {
  e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android

IOS中的日期兼容问题

safari无法解释YYYY-MM-DD HH:mm:ss 这样的时间格式，需转换为IOS的YYYY,MM, DD,HH,mm,ss格式或通用的YYYY/MM/DD HH:mm:ss格式

var arr = "2016/11/11 11:11:11".split(/[- : \/]/), 
date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
document.write(date);

URL编码

通常URL中输入中文或特殊符号时会被自动转码，但有的手机(华为)会认为转码过程是一次路由跳转,因此导致返回时返回到转码前,然后再次转码,无限循环,无法返回
另外有些环境(手淘)中URL不支持自动转码，因此建议使用encodeURI和encodeURIComponent

encodeURI方法不会对下列字符编码 ASCII字母、数字、~!@#$&*()=:/,;?+'
适用于对query参数进行编码
encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、~!*()'
编码的范围更大，适用于对整个URL进行编码

IOS12.1时出现的输入法获得的验证码会输入两遍的问题

某些app或者微信网页里复制验证码时IOS会触发UITextFieldTextDidChangeNotification监听事件，导致验证码出现了两次，通过限制html页面中input的maxlength可以规避掉这个系统bug
中maxlength无效，可通过监听oninput限制长度

input输入框调用九宫格数字键盘

部分ios中，window、document、body的click无效

在部分ios中，只有button、a即使没有绑定click回调也会向上冒泡。对div、span等只有自己具有click时才会向上冒泡。

使用touchend代替click
将click改为绑定在内部的容器元素上(如div.container)
为内部元素绑定空的click事件处理函数

click me
$("body span").bind("click",function(){})

safari中页面高度问题

使用高度100vh时：100vh=当前视口可见高度底部工具栏会占用视口底部约80px高度，通过window.innerHeight可以获得网页可展示部分实际高度

一些手机端的meta及兼容问题

meta

CSS