文中大部分内容来源于笔者JowayYoung的 文章。全部坑位的源码都按语言方向记录在笔者Github上，若有未记录的坑位可提PR让笔者合并，给个Star支持下咧！
HTML方向
调用系统功能
使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。
这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。
<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086小姐姐</a>
<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086小姐姐</a>
<!-- 发送邮件 -->
<a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>
<!-- 选择照片或拍摄照片 -->
<input type="file" accept="image/*">
<!-- 选择视频或拍摄视频 -->
<input type="file" accept="video/*">
<!-- 多选文件 -->
<input type="file" multiple>
忽略自动识别
有些移动端浏览器会自动将数字字母符号识别为电话/邮箱并将其渲染成上述调用系统功能里的<a>。虽然很方便却有可能违背需求。
<!-- 忽略自动识别电话 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略自动识别邮箱 -->
<meta name="format-detection" content="email=no">
<!-- 忽略自动识别电话和邮箱 -->
<meta name="format-detection" content="telephone=no, email=no">
弹出数字键盘
使用<input type="tel">弹起数字键盘会带上#和*，适合输入电话。推荐使用<input type="number" pattern="\d*">弹起数字键盘，适合输入验证码等纯数字格式。
<!-- 纯数字带#和* -->
<input type="tel">
<!-- 纯数字 -->
<input type="number" pattern="\d*">
唤醒原生应用
通过location.href与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为URL Scheme，其基本格式为scheme://[path][?query]，笔者曾经发表过《H5与App的通讯方式》讲述URL Scheme的使用。
- scheme：应用标识，表示应用在系统里的唯一标识
- path：应用行为，表示应用某个页面或功能
- query：应用参数，表示应用页面或应用功能所需的条件参数
URL Scheme一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。还好微信浏览器可开启白名单让URL Scheme有效。
若在页面引用第三方原生应用的URL Schema，可通过抓包第三方原生应用获取其URL。
<!-- 打开微信 -->
<a href="weixin://">打开微信</a>
<a href="weixin://dl/business/?ticket=">打开微信跳转到具体的页面</a>
//ticket是动态变化的，目前没有大范围对外开发，普通用户无法使用
<a href="weixin://dl/scan">扫一扫</a>
<a href="weixin://dl/feedback">反馈</a>
<a href="weixin://dl/moments">朋友圈</a>
<a href="weixin://dl/settings">设置</a>
<a href="weixin://dl/notifications">消息通知设置</a>
<a href="weixin://dl/general">通用设置</a>
<a href="weixin://dl/officialaccounts">公众号</a>
<a href="weixin://dl/games">游戏</a>
<a href="weixin://dl/help">反馈</a>
<a href="weixin://dl/profile">个人信息</a>
<a href="weixin://dl/features">功能</a>
<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>
<!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>
<!-- 打开支付宝的蚂蚁森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>
禁止页面缩放
在智能手机的普及下，很多网站都具备桌面端和移动端两种浏览版本，因此无需双击缩放查看页面。禁止页面缩放可保障移动端浏览器能无遗漏地展现页面所有布局。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
禁止页面缓存
Cache-Control指定请求和响应遵循的缓存机制，不想使用浏览器缓存就禁止呗！
<meta http-equiv="Cache-Control" content="no-cache">
禁止字母大写
有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，特么的烦。直接声明autocapitalize=off关闭首字母大写功能和autocorrect=off关闭纠正功能。
<input autocapitalize="off" autocorrect="off">
针对Safari配置
贴一些Safari较零散且少用的配置。
<!-- 设置Safari全屏，在iOS7+无效 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 改变Safari状态栏样式，可选default/black/black-translucent，需在上述全屏模式下才有效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加页面启动占位图 -->
<link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">
<!-- 保存网站到桌面时添加图标 -->
<link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">
<!-- 保存网站到桌面时添加图标且清除默认光泽 -->
<link rel="apple-touch-icon-precomposed" href="pig.jpg">
针对其他浏览器配置
贴一些其他浏览器较零散且少用的配置，主要是常用的QQ浏览器、UC浏览器和360浏览器。从网易MTL的测试数据得知，新版的QQ浏览器和UC浏览器已不支持以下<meta>声明了。
<!-- 强制QQ浏览器竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- 强制QQ浏览器全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- 开启QQ浏览器应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 强制UC浏览器竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- 强制UC浏览器全屏 -->
<meta name="full-screen" content="yes">
<!-- 开启UC浏览器应用模式 -->
<meta name="browsermode" content="application">
<!-- 开启360浏览器极速模式 -->
<meta name="renderer" content="webkit">
让:active有效，让:hover无效
有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给<body>注册一个空的touchstart事件可将两种状态反转。
<body ontouchstart></body>
网友评论