前言
不知不觉在网易已有三年半,占了一半时间都在与移动端打交道,整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android
和iOS
各显神通,Android
的系统版本和屏幕分辨率多得难以一招兼容,iOS
的顽固标准和未知特性多得难以快速掌握。
三年半沉淀通过本文记录下所遇到的坑位,或许有些坑位还未遇到,但本文记录的40条坑位绝对能让同学们少走很多弯路,特别是前端小白。为了减少废话提高本文质量,对以下内容做一些约定。
- 提及的安卓系统包括
Android
和基于Android
开发的系统 - 提及的苹果系统包括
iOS
和iPadOS
- 本文针对的开发场景是
移动端浏览器
,因此大部分坑位的解决方案在桌面端浏览器
里不一定有效 - 解决方案若未提及适用系统就默认在安卓系统和苹果系统上都适用,若提及适用系统则会详细说明
Webkit
及其衍生内核在移动端浏览器
市场占有率里达到惊人的97%
,因此无需太过担心CSS3
、ES6
和浏览器新特性
的兼容性- 真正的开发环境都是基于
webpack
构建,因此代码演示都不会带上CSS前缀,除非该属性是Webkit
独有才会带上-webkit-
每次填坑都是一次实践过程,全部坑位的源码都按语言方向记录在笔者Github上,若有未记录的坑位可提PR让笔者合并,给个Star支持下咧!
本来想为每个坑位都截图
或录制GIF
作为演示,但考虑到目前掘金的Markdown编辑器
操作图片还存在缺陷就放弃了,每次上传图片都会花费很多时间甚至上传失败(望掘金的产品小姐姐和程序小哥哥优化喔)。若需演示只能自行复制代码了。
HTML方向
调用系统功能
使用<a>
能快速调用移动设备的电话/短信/邮件
三大通讯功能,使用<input>
能快速调用移动设备的的图库/文件
。
这些功能方便了页面与系统的交互,关键在于调用格式一定要准确,否则会被移动端浏览器
忽略。
<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086小姐姐</a>
<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086小姐姐</a>
<!-- 发送邮件 -->
<a href="mailto:[email protected]">发送邮件给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="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">
复制代码