移动端 H5 相关疑难总结

最新推荐文章于 2024-06-27 16:30:42 发布

想必是渣渣宇了

最新推荐文章于 2024-06-27 16:30:42 发布

阅读量1k

点赞数

分类专栏： H5 H5&App之间的交互浏览器文章标签：前端

本文链接：https://blog.csdn.net/weixin_44205605/article/details/113600026

版权

H5 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

浏览器

5 篇文章 0 订阅

订阅专栏

H5&App之间的交互

2 篇文章 0 订阅

订阅专栏

本文主要讲解关于移动端H5页面内的 HTML CSS JS 中可能出现的问题，并赋予解决方式。

注意事项

A. 本文提及的安卓系统包括Android和基于Android开发的系统
B. 本文提及的苹果系统包括iOS与iPadOS
C. 本文内的大部分内容都是适应绝大多数浏览器的，所以除去某些偏门操作不用担心兼容问题
D. 本文是针对移动端浏览器的，所以下文提到的浏览器均为移动端浏览器，PC上不一定会有效

HTML

调用系统功能

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

这些功能的写法一定要精准，不然会被浏览器忽略

    <!-- 拨打电话 -->
    <a href="tel:10086">打电话给10086</a>
    <!-- 发送短信 -->
    <a href="sms:10086">发送短信给10086</a>
    <!-- 发送邮件 -->
    <a href="mailto:weibienaole@163.com">发邮件给Weibienaole</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="formate-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][?puery]。

scheme：应用表示，表示应用在系统里的唯一标识
path：应用行为，表示应用某个页面或者功能
query：应用参数，表示应用页面或者应用功能所需的条件参数

URL Scheme一般由前端与客户端(app)共同协商。唤醒原生应用的前提必须是在移动端安装了此应用，部分浏览器即使安装了也无法唤醒，是因为浏览器认为URL Scheme是一种潜在的危险行为并禁用了它，像Safari和微信浏览器。但是微信浏览器可以开启白名单让URL Scheme有效。

如果要在页面引用第三方原生应用的URL Scheme，可以通过抓包获取它的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全屏，在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在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给注册一个空的touchstart事件可将两种状态反转。

<body ontouchstart></body>

CSS

自适应布局

针对移动端，通常都是 JS依据屏幕宽度与设计图宽度的比例动态声明< html >的font-size，以rem为长度单位声明所有节点的几何属性，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过媒体查询做特别处理。
这个是我自己配置的 rem.js

还有一个简单的方法就是根据屏幕宽度与设计图宽度的比例，使用calc动态声明< html >的 font-size，这样就可以替代上述的rem.js

html {
    font-size: calc(100vw / 7.5);
}

如果iPad Pro分辨率 1024px 为移动端与PC的断点，可以结合使用媒体查询来做断点处理。1024px以下使用rem布局，以上不做处理

@media screen and (max-width: 1024px) {
    html {
        font-size: calc(100vw / 7.5);
    }
}

自动适应背景

使用rme布局声明一个元素背景，多数会background-size: cover。正常情况下会完美展示，但是切换分辨率会导致左右空出1px的间隙。

此时将background-size设置为100% 100%,跟随width与height变化而变化。

.elem {
    width: 1rem;
    height: 1rem;
    background: url('') no-repeat center/100% 100%;
}

监听屏幕旋转

使用 @media 完美处理屏幕旋转

/* 竖屏 */
@media all and (orientation: portrait) {
    /* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: landscape) {
    /* 自定义样式 */
}

支持弹性滚动

苹果上非< body > 元素滚动操作可能会存在卡顿，安卓不会。
通过声明 overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动，增加流畅度。

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

禁止滚动传播

移动端浏览器中，当页面包含多个滚动区域，滚完一个区域后若还存在滚动动量则会将这些剩余的动量传播到下一个滚动区域，造成该区域也滚动起来。这种行为被称为滚动传播。

此行为可以被禁止

.elem {
    overscroll-behavior: contain;
}

禁止屏幕抖动

一个页面中突然出现滚动条，可能会产生左右抖动的情况。一个滚动容器内，打开弹窗就隐藏滚动条，关闭就显示，来回操作会让屏幕抖动。
提前声明滚动容器的padding-right 为滚动条宽度，就可以消除这种情况。

但是不同浏览器滚动条宽度都不一致，甚至不一定占位置，所以需要动态计算出滚动条宽度。
100vw为视图宽度，100%为滚动容器宽度，相减就是滚动条宽度。

body {
    padding-right: calc(100vw - 100%);
}

禁止长按操作

如果不想在页面中长按唤出功能的话，声明touch-select:none禁止用户长按操作和选择复制

* {
    /* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
    user-select: none; /* 禁止长按选择文字 */
    -webkit-touch-callout: none;
}

但声明 touch-select:none会让 < input >和< textarea > 无法输入文本，可以声明auto-select：auto排除在外

input,
textarea {
    user-select: auto;
}

禁止字体调整

旋转屏幕可能会改变字体大小，声明 text-size-adjust:100% 让字体大小保持不变

* {
    text-size-adjust: 100%;
}

禁止高亮显示

触摸元素会出现灰色半透明遮罩，可以禁止其显示

* {
    -webkit-tap-highlight-color: transparent;
}

禁止动画闪屏

移动端添加动画，可能会出现闪屏，需要给动画元素但父元素构造一个3D环境就可以了

.elem {
    perspective: 1000;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

自定义表单样式

自定义表单

button,
input,
select,
textarea {
    appearance: none;
    /* 自定义样式 */
}

自定义滚动条

::-webkit-scrollbar-* 为前缀就可以自定义滚动条样式了

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-track 轨道部分
::-webkit-scrollbar-track 滑块部分

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-image: linear-gradient(135deg, #09f, #3c9);
}

css 让滚动条消失

  // 隐藏滚动条

  [className/id/dom]::-webkit-scrollbar {
    display: none;
  }

  ::-webkit-scrollbar {
    width: 0px;
  }

  ::-webkit-scrollbar-track {
    background-color: none;
  }

  ::-webkit-scrollbar-thumb {
    background-color: none;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: none;
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: none;
  }

输入框 placeholder 设置样式

input::-webkit-input-placeholder {
    color: #66f;
}

输入框文本居中对齐

PC 声明 line-height:height 即可
但移动端不行
解决方式：

input {
    line-height: normal;
}

下拉框对齐

默认左对齐，可设置又对齐

select option {
    direction: rtl;
}

iOS修复点击无效

iOS某些情况下非可点击元素设置click可能会无效，只要针对不声效的元素设置如下即可

.elem {
    cursor: pointer;
}

识别文本换行

可声明white-space:pre-line交由浏览器做断行处理

* {
    white-space: pre-line;
}

开启硬件加速

开启GPU硬件加速

.elem {
    transform: translate3d(0, 0, 0);
    /* transform: translateZ(0); */
}

描绘一像素边框

.elem {
    position: relative;
    width: 200px;
    height: 80px;
    &::after {
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid #f66;
        width: 200%;
        height: 200%;
        content: "";
        transform: scale(.5);
        transform-origin: left top;
    }
}

单行溢出&多行溢出

.elem {
    width: 400px;
    line-height: 30px;
    font-size: 20px;
    &.sl-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &.ml-ellipsis {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}

JS

禁止点击穿透

移动端浏览器里点击操作会存在300ms延迟

为什么？
2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放，当用户执行第一次单击后会预留300ms检测用户是否继续执行单击，若是则执行缩放操作，若否则执行点击操作。
现在几乎所有移动端浏览器都配备该功能。而该方案引发的点击延迟被称为点击穿透。

在前端领域里最早解决点击穿透是jQuery时代的zepto，估计现在大部分同学都未使用过zepto，其实它就是移动端版本的jquery。zepto封装tap事件能有效地解决点击穿透，通过监听document上的touch事件完成tap事件的模拟，并将tap事件冒泡到document上触发。

在移动端浏览器上不使用click事件而使用touch事件是因为click事件有着明显的延迟，后续又出现fastclick。该解决方案监听用户是否做了双击操作，可正常使用click事件，而点击穿透就交给fastclick自动判断。

fastclick有现成的NPM包，可直接安装到项目里。引入fastclick可使用click事件代替tap事件，接入方式极其简单。

import Fastclick from "fastclick";

FastClick.attach(document.body);

禁止滑动穿透

移动端浏览器里出现弹窗时，若在屏幕上滑动能触发弹窗底下的内容跟着滚动

首先明确解决滑动穿透需保持哪些交互行为，那就是除了弹窗内容能点击或滚动，其他内容都不能点击或滚动。目前很多解决方案都无法做到这一点，全部解决方案都能禁止< body >的滚动行为却引发其他问题。

弹窗打开后内部内容无法滚动
弹窗关闭后页面滚动位置丢失
Webview能上下滑动露出底色

当打开弹窗时给< body >声明position:fixed;left:0;width:100% 并动态声明top。声明position:fixed会导致< body>滚动条消失，此时会发现虽然无滑动穿透，但页面滚动位置早已丢失。通过scrollingElement获取页面当前滚动条偏移量并将其取负值且赋值给top，那么在视觉上就无任何变化。当关闭弹窗时移除position:fixed;left:0;width:100%和动态top。

scrollingElement可兼容地获取scrollTop和scrollHeight等属性，在移动端浏览器里屡试不爽。document.scrollingElement.scrollHeight可完美代替曾经的document.documentElement.scrollHeight || document.body.scrollHeight，一眼看上去就是代码减少了。

该解决方案在视觉上无任何变化，完爆其他解决方案，其实就是一种反向思维和障眼法。该解决方案完美解决固定弹窗和滚动弹窗对< body>全局滚动的影响，当然也可用于局部滚动容器里，因此很值得推广。

body.static {
    position: fixed;
    left: 0;
    width: 100%;
}

const body = document.body;
const openBtn = document.getElementById("open-btn");
const closeBtn = document.getElementById("close-btn");
openBtn.addEventListener("click", e => {
    e.stopPropagation();
    const scrollTop = document.scrollingElement.scrollTop;
    body.classList.add("static");
    body.style.top = `-${scrollTop}px`;
});
closeBtn.addEventListener("click", e => {
    e.stopPropagation();
    body.classList.remove("static");
    body.style.top = "";
});

支持往返刷新

点击移动端浏览器的前进按钮或后退按钮，有时不会自动执行旧页面的JS代码，这与往返缓存有关。这种情况在Safari上特别明显，简单概括就是往返页面无法刷新。

往返缓存指浏览器为了在页面间执行前进后退操作时能拥有更流畅体验的一种策略，以下简称BFCache。该策略具体表现为：当用户前往新页面前将旧页面的DOM状态保存在BFCache里，当用户返回旧页面前将旧页面的DOM状态从BFCache里取出并加载。大部分移动端浏览器都会部署BFCache，可大大节省接口请求的时间和带宽。

// 在新页面监听页面销毁事件
window.addEventListener("onunload", () => {
    // 执行旧页面代码
});

第二种解决方式

pageshow事件在每次页面加载时都会触发，无论是首次加载还是再次加载都会触发，这就是它与load事件的区别。pageshow事件暴露的persisted可判断页面是否从BFCache里取出。

window.addEventListener("pageshow", e => e.persisted && location.reload());

若浏览器不使用 < meta http-equiv=“Cache-Control” content=“no-cache”> 禁用缓存，该解决方案还是很值得一用

解析有效日期

在苹果系统上解析YYYY-MM-DD HH:mm:ss这种日期格式会报错Invalid Date，但在安卓系统上解析这种日期格式完全无问题。(可以看一下我的另一篇文章：JS&React 由时间表衍生出来的关于时间的处理)

new Date("2019-03-31 21:30:00"); // Invalid Date

查看Safari相关开发手册发现可用YYYY/MM/DD HH:mm:ss这种日期格式，简单概括就是年月日必须使用/衔接而不能使用 - 衔接。当然安卓系统也支持该格式，然而接口返回字段的日期格式通常是YYYY-MM-DD HH:mm:ss，那么需替换其中的 - 为 / 。

const date = "2019-03-31 21:30:00";
new Date(date.replace(/\-/g, "/"));

修复高度坍塌

当页面同时出现以下三个条件时，键盘占位会把页面高度压缩一部分。当输入完成键盘占位消失后，页面高度有可能回不到原来高度，产生坍塌导致Webview底色露脸，简单概括就是输入框失焦后页面未回弹。(可以参考我的另一篇文章，也是一种处理方式：移动端H5 input标签在IOS手机下键盘弹出回拉异常处理)

页面高度过小
输入框在页面底部或视窗中下方
输入框聚焦输入文本

只要保持前后滚动条偏移量一致就不会出现上述问题。在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。

const input = document.getElementById("input");
let scrollTop = 0;
input.addEventListener("focus", () => {
    scrollTop = document.scrollingElement.scrollTop;
});
input.addEventListener("blur", () => {
    document.scrollingElement.scrollTo(0, this.scrollTop);
});

修复输入监听

在苹果系统上的输入框输入文本，keyup/keydown/keypress事件可能会无效。当输入框监听keyup事件时，逐个输入英文和数字会有效，但逐个输入中文不会有效，需按回车键才会有效。

此时可用input事件代替输入框的keyup/keydown/keypress事件。

简化回到顶部

正常的一个回到顶部方法，需scrollTop、定时器和条件判断三者配合才能完成。
但是有一个API一行核心代码即可完成此效果。

scrollIntoView
它会滚动目标元素的父容器使之对用户可见，简单概括就是相对视窗让容器滚动到目标元素位置。它有三个可选参数能让scrollIntoView滚动起来更优雅。

behavior: 动画过渡效果，默认auto无，可选smooth平滑
inline: 水平方向对齐方式，默认nearest就近对齐，可选start顶部对齐、center中间对齐和end底部对齐
block: 垂直方向对齐方式，默认start顶部对齐，可选center中间对齐、end底部对齐和nearest就近对齐

const gotopBtn = document.getElementById("gotop-btn");
openBtn.addEventListener("click", () => document.body.scrollIntoView({ behavior: "smooth" }));

还可滚动到目标元素位置，只需将document.body修改成目标元素的DOM对象。

简化懒性加载

同上，编写一个懒性加载函数也同样需scrollTop、定时器和条件判断三者配合才能完成。但DOM中有一个函数可以完成上述功能，该函数无需监听容器的scroll事件，通过浏览器自身机制完成滚动监听。
IntersectionObserver
它提供一种异步观察目标元素及其祖先元素或顶级文档视窗交叉状态的方法。

场景一: 图片懒加载

只需确认图片进入可视区域就赋值加载图片，赋值完成还需对图片停止监听。

<img data-src="pig.jpg">
<!-- many <imgs /> -->

const imgs = document.querySelectorAll("img.lazyload");
const observer = new IntersectionObserver(nodes => {
    nodes.forEach(v => {
        if (v.isIntersecting) { // 判断是否进入可视区域
            v.target.src = v.target.dataset.src; // 赋值加载图片
            observer.unobserve(v.target); // 停止监听已加载的图片
        }
    });
});
imgs.forEach(v => observer.observe(v));

场景二: 下拉加载

在列表最底部部署一个占位元素且该元素无任何高度或实体外观，只需确认占位元素进入可视区域就请求接口加载数据。

<ul>
    <li></li>
    <!-- many <li> -->
</ul>
<!-- 也可将#bottom以<li>的形式插入到<ul>内部的最后位置 -->
<div id="bottom"></div>

const bottom = document.getElementById("bottom");
const observer = new IntersectionObserver(nodes => {
    const tgt = nodes[0]; // 反正只有一个
    if (tgt.isIntersecting) {
        console.log("已到底部，请求接口");
        // 执行接口请求代码
    }
})
bottom.observe(bottom);

优化扫码识别

二维码生成方式有以下三种。

img
svg
canvas

大部分移动端浏览器只能识别< img>渲染的二维码，为了让全部移动端浏览器都能识别二维码，那只能使用< img>渲染二维码了。若使用SVG和Canvas的方式生成二维码，那就想方设法把二维码数据转换成Base64再赋值到< img>的src上。

一个页面可能存在多个二维码，若长按二维码只能识别最后一个，那只能控制每个页面只存在一个二维码。

自动播放媒体

常见媒体元素包括音频< audio>和视频< video>，为了让用户得到更好的媒体播放体验与不盲目浪费用户流量，大部分移动端浏览器都明确规定不能自动播放媒体或默认屏蔽autoplay。为了能让媒体在页面加载完成后自动播放，只能显式声明播放。

const audio = document.getElementById("audio");
const video = document.getElementById("video");
audio.play();
video.play();

对于像微信浏览器这样的内置浏览器，还需监听其应用SDK加载完成才能触发上述代码，以保障WebView正常渲染。

document.addEventListener("WeixinJSBridgeReady", () => {
    // 执行上述媒体自动播放代码
});

在苹果系统上明确规定用户交互操作开始后才能播放媒体，未得到用户响应会被Safari自动拦截，因此需监听用户首次触摸操作并触发媒体自动播放，而该监听仅此一次。

document.body.addEventListener("touchstart", () => {
    // 执行上述媒体自动播放代码
}, { once: true });

好啦，以上就是全部了，本文以转载+个人二次编辑的形式编辑出来的，真正的原文在这里

喜欢的朋友可以来一波点赞收藏～有疑问请下方评论或者联系QQ: 884823636

如果转载请标明本文地址

想必是渣渣宇了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

移动端 H5 相关疑难总结

本文主要讲解关于移动端H5页面内的 HTML CSS JS 中可能出现的问题，并赋予解决方式。

注意事项

HTML

调用系统功能

忽略自动识别

弹出数字键盘

唤醒原生应用

禁止页面缩放

禁止页面缓存

禁止字母大小写

关于Safari的配置

针对其他浏览器的配置

让:active有效，:hover失效

CSS

自适应布局

自动适应背景

监听屏幕旋转

支持弹性滚动

禁止滚动传播

禁止屏幕抖动

禁止长按操作

禁止字体调整

禁止高亮显示

禁止动画闪屏

自定义表单样式

自定义滚动条

css 让滚动条消失

输入框 placeholder 设置样式

输入框 文本居中对齐

下拉框对齐

iOS修复点击无效

识别文本换行

开启硬件加速

描绘一像素边框

单行溢出&多行溢出

JS

禁止点击穿透

移动端浏览器里点击操作会存在300ms延迟

禁止滑动穿透

移动端浏览器里出现弹窗时，若在屏幕上滑动能触发弹窗底下的内容跟着滚动

支持往返刷新

点击移动端浏览器的前进按钮或后退按钮，有时不会自动执行旧页面的JS代码，这与往返缓存有关。这种情况在Safari上特别明显，简单概括就是往返页面无法刷新。

第二种解决方式

解析有效日期

在苹果系统上解析YYYY-MM-DD HH:mm:ss这种日期格式会报错Invalid Date，但在安卓系统上解析这种日期格式完全无问题。(可以看一下我的另一篇文章：JS&React 由时间表衍生出来的关于时间的处理)

修复高度坍塌

修复输入监听

在苹果系统上的输入框输入文本，keyup/keydown/keypress事件可能会无效。当输入框监听keyup事件时，逐个输入英文和数字会有效，但逐个输入中文不会有效，需按回车键才会有效。

简化回到顶部

简化懒性加载

场景一: 图片懒加载

场景二: 下拉加载

优化扫码识别

自动播放媒体

好啦，以上就是全部了，本文以转载+个人二次编辑的形式编辑出来的，真正的原文在这里

喜欢的朋友可以来一波点赞收藏～ 有疑问请下方评论或者联系QQ: 884823636

如果转载请标明本文地址

输入框文本居中对齐

喜欢的朋友可以来一波点赞收藏～有疑问请下方评论或者联系QQ: 884823636