前端必须注意的40条移动端H5坑位指南-HTML方向

最新推荐文章于 2021-12-14 10:40:44 发布

JettLin

最新推荐文章于 2021-12-14 10:40:44 发布

阅读量170

点赞数 1

分类专栏： h5 文章标签： html5

原文链接：https://mp.weixin.qq.com/s/M_zYpa7gVthsjmtz37z-cw

版权

h5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端必须注意的40条移动端H5坑位指南-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 pattern="\d" >弹起数字键盘，适合输入验证码等纯数字格式。

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

<!-- 纯数字 -->
<input 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="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浏览器。

<!-- 强制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>

JettLin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端必须注意的40条移动端H5坑位指南-HTML方向

前端必须注意的40条移动端H5坑位指南-HTML方向调用系统功能使用<a>标签能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>标签能快速调用移动设备的的图库/文件。这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。<a href="tel:10086">拨打电话给10086小姐姐</a><a href="sm
复制链接

扫一扫

专栏目录