中高级前端必须注意的40条移动端H5坑位指南 _H5

前言移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。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: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=https://www.isolves.com/it/cxkf/ydd/html5/2021-03-18/"weixin://">打开微信打开支付宝打开支付宝的扫一扫
上一页
1
2
3
4
5
6
下一页
		  	





























推荐阅读

           
                  
              
                  雪花秀适合什么年龄段的人使用？ 
                
                   
                
              
            

                  
              
                  搞笑闽吴|说出一句流传千年的话，却死的不明不白挺遗憾，此人射术堪比黄忠 
                
                   
                
              
            

                  
              
                  石竹的摆放技巧 石竹怎么盆栽 
                
                   
                
              
            

                  
              
                  洋哥爱生活|紫荆花开，红鸾再现，旧爱拉扯，情有余温，余生共相随，15天后 
                
                   
                
              
            

                  
              
                  小了白了兔|凭此拿到近两万奖学金, 邻近毕业却后悔不已!，我在大学干团支书, 
                
                   
                
              
            

                  
              
                  |还能盼来“吃猪自由”吗？，中国冻猪肉储备恐耗尽 
                
                   
                
              
            

                  
              
                  脚气怎么治疗，推荐五个有效的方法 
                
                   
                
              
            

                  
              
                  香蕉每次可以吃多少根 
                
                   
                
              
            

                  
              
                  大家吃完火锅一般喝啥来降火中国好凉茶吗 
                
                   
                
              
            

                  
              
                  【生肖小哥哥6514252305】不露锋芒，装傻能力一流，不容小觑，这几个星座“外傻内精” 
                
                   
                
              
            

                  
              
                  恒大|恒大深夜发声：成立24年共借款20523笔，从未有利息晚付、本金逾期归还 
                
                   
                
              
            

                  
              
                  录屏器下载在什么地方？好用的录屏器软件分享 
                
                   
                
              
            

                  
              
                  中国设计中心|特斯拉中国设计中心正在招聘 或推中国风电动车 
                
                   
                
              
            

                  
              
                  属马@未来三个月，4属相迎来好运，大富大贵，家庭幸福美满，吉祥安康 
                
                   
                
              
            

                  
              
                  最高可享12期免息 海信阅读手机A5京东聚惠来袭 
                
                   
                
              
            

                  
              
                  烹饪|晒晒我家一周的午餐，简单好吃不浪费，网友：一看就是北方人餐桌 
                
                   
                
              
            

                  
              
                  鸡胸肉|自用抑菌液测评分享！不愧是宝藏国货，短短45天新甲蹭蹭冒！ 
                
                   
                
              
            

                  
              
                   出手|比九灵元圣还厉害的妖怪，他一出手三界就会动乱 
                
                   
                
              
            

                  
              
                  李宇春|女人味穿搭都可以跟李宇春学了！穿短裙配高筒靴，撩人有范儿极了 
                
                   
                
              
            

                  
              
                  瘦子增肌 健身教练使用方法 
                
                   
                
              
            

          

Vue前端开发规范 

MySQL必须要掌握的常用查询语句 

嘘，认真看！Layui一定是Java程序员必备后台前端框架 

JavaScript前端各种文件下载功能的实现 

web前端HTML高频面试题 

防火墙必须掌握的区域特性与划分 

前端工程师如何判断一个对象是否有某个属性？ 

如何快速掌握Web前端技术？ 

2021年Web开发必须知道的7大顶级趋势 

路由器经常掉线，必须重新插拔网线才能上网。什么原因？