一、HTML

1、禁止页面放大缩小

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

2、禁止页面缓存

<meta http-equiv="Cache-Control" content="no-cache">

3、禁止 ios 手机识别长串数字为电话

<meta name="format-detection" content="telephone=no">

4、禁止 Android 手机识别邮箱

<meta name="format-detection" content="email=no" />

5、ios下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

6、调用手机系统功能

<!-- 拨打电话 -->
<a href="tel:123456">拨打电话</a>

<!-- 发送短信 -->
<a href="sms:123456">发送短信</a>

<!-- 发送邮件 -->
<a href="123456@qq.com">发送邮件</a>

<!-- 选择照片或拍摄照片 -->
<input type="file" accept="image/*">

<!-- 选择视频或拍摄视频 -->
<input type="file" accept="video/*">

<!-- 多选文件 -->
<input type="file" multiple>

7、调用手机数字键盘

<!-- 纯数字 -->
<input type="number" pattern="\d*">
<!-- 纯数字带#和* -->
<input type="tel"> 

8、H5唤醒原生应用

可以使用URL Scheme 方案，URL Scheme 一般由协议名、路径、参数组成，模式如下：[scheme:][//authority][path][?query][#fragment]，通过<a>标签链接跳转

<!-- 打开微信 -->
<a href="weixin://">打开微信</a>
<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>
<!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a> 
<!-- 打开支付宝的蚂蚁森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

二、CSS

1、禁止用户选中文字和长按下载图片

html,body{
    user-select:none;
    -webkit-user-select:none;
}

2、禁止ios长按时触发系统菜单

html,body{
    touch-callout:none;
    -webkit-touch-callout:none;
}

3、去除元素被触摸时产生的半透明灰色遮罩

a,button,input,textarea{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only;
}

4、去除ios端输入框聚焦时出现的阴影

input:focus{
    outline:none
}
input{
    -webkit-appearance: none;
}

5、ios支持滚动惯性

body{ 
    -webkit-overflow-scrolling: touch;
} 
div{ 
    overflow: auto;
}

6、禁止滚动传播

div{ 
    overscroll-behavior: contain;
}

7、0.5px的线

div{ 
    height:1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

8、开启GPU加速

div{ 
    transform: translate3d(0, 0, 0)
    /* transform: translateZ(0); */
}

三、js

1、ios 日期转换问题

const date = "2023-11-15 16:00:00" //直接new Date(date)，会报错Invalid Date
new Date(date.replace(/\-/g, "/"))

2、自动播放媒体

// 安卓
const audio = document.getElementById("audio")
const video = document.getElementById("video")
audio.play()
video.play()

// ios
document.body.addEventListener("touchstart", () => {
    const audio = document.getElementById("audio")
    const video = document.getElementById("video")
    audio.play()
    video.play()
}, { once: true })

//微信
document.addEventListener("WeixinJSBridgeReady", () => { 
    const audio = document.getElementById("audio")
    const video = document.getElementById("video")
    audio.play()
    video.play()
})