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

骑着蜗牛去放羊~

已于 2023-05-31 16:15:03 修改

阅读量171

点赞数

文章标签：移动开发

于 2021-04-16 17:02:34 首次发布

本文链接：https://blog.csdn.net/zyplll/article/details/115766594

版权

移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。

媒体查询常用样式表

   <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 竖放加载
   <link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">   // 横放加载

滚动穿透问题

滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容。网上整理了解决方案，但有些还是存在一定的问题：

设置overflow为hidden


.modal-open {
    &, body {
        overflow: hidden;
        height: 100%
    }
}

调用系统功能

使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用能快速调用移动设备的的图库/文件。

这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。

<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086小姐姐</a>

<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086小姐姐</a>

<!-- 发送邮件 -->
<a href="mailto:young.joway@aliyun.com">发送邮件给****</a>

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

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

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

filter可以给不规则图形加阴影

filter: drop-shadow(0 0 1.33vw rgba(0, 0, 0, 0.5))

解决安卓手机圆角失效问题

border-radius: 2px; 
 background-clip: padding-box;

js 之 touchmove + preventDefault

modal.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, false)

解决ios input 默认圆角边框问题

border-radius: 0;

忽略自动识别

有些移动端浏览器会自动将数字字母符号识别为电话/邮箱并将其渲染成上述「调用系统功能」里的。虽然很方便却有可能违背需求。

<!-- 忽略自动识别电话 -->
<meta name="format-detection" content="telephone=no">

<!-- 忽略自动识别邮箱 -->
<meta name="format-detection" content="email=no">

<!-- 忽略自动识别电话和邮箱 -->
<meta name="format-detection" content="telephone=no, email=no">

input输入框点击没反应或者多点几次

ios: 不好点击 需要点好多次才会弹出输入法  ：解决 外部加个div click 使input.focus()
安卓： 无

input 光标光标特别大比字体还大


ios: 去掉高度 使用padding撑起 （ios光标会跟着input的高度而不是字体的高度）、
安卓：Im fine thank you

弹出数字键盘

使用弹起数字键盘会带上#和*，适合输入电话。推荐使用弹起数字键盘，适合输入验证码等纯数字格式

<!-- 纯数字带#和* -->
<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>

JavaScript 在 ios 时间显示 NaN

new Date("2017-02-16 20:41:10".replace(/-/g,'/')).getFullYear()

禁止页面缩放

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

禁止页面缓存

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

禁止字母大写

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

针对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浏览器竖屏 -->
<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">