H5 与移动端交互经验总结

作者: 酷酷的凯先生 | 来源:发表于2021-04-17 12:04 被阅读0次

HTML 相关

标签mate的相关设置

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

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

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

<!-- 禁止页面缩放 -->
<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">

针对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浏览器已启用的<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">

使用<a>标签调用移动设备的电话、短信、邮件功能

<!-- 拨打电话 -->
<a href="tel:136xxxxxxxx">拨打电话给给136xxxxxxxx</a>

<!-- 发送短信 -->
<a href="sms:136xxxxxxxx">发送短信给136xxxxxxxx</a>

<!-- 发送邮件 -->
<a href="mailto:136xxxxxxxx@qq.com">发送邮件给136xxxxxxxx@qq.com</a>

使用<input>标签调用移动设备的图库、视频、文件、弹出数字键盘功能
也可以关闭首字母大写及纠正的功能

<input type="file" accept="image/*">

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

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

<!-- 纯数字带 # 和 * 多用于输入电话 -->
<input type="tel">

<!-- 纯数字 多用于输入验证码等纯数字的格式-->
<input type="number" pattern="\d*">

<!--关闭首字母大写功能及纠正功能-->
<input autocapitalize="off" autocorrect="off">

CSS 相关

有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给<body>注册一个空的touchstart事件可将两种状态反转。

<body ontouchstart></body>

自动适应布局

通常会结合JS依据屏幕宽度与设计图宽度的比例动态声明<html>的font-size，以rem为长度单位声明所有节点的几何属性，一般是1rem=100px，实例代码如下：

function AutoResponse(width = 750) {
    const target = document.documentElement;
    if (target.clientWidth >= 600) {
        target.style.fontSize = "80px";
    } else {
        target.style.fontSize = target.clientWidth / width * 100 + "px";
    }
}
AutoResponse();
window.addEventListener("resize", () => AutoResponse());

还可依据屏幕宽度与设计图宽度的比例使用calc()动态声明<html>的font-size，可完全代替上述代码

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

// 利用媒体查询判断移动端和桌面端的断点
@media screen and (max-width: 1024px) {
    html {
        font-size: calc(100vw / 7.5);
    }
}

背景图在不同分辨率下出现左右空出1px到npx的空隙问题

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

使用media监听屏幕旋转

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

件优化滚动事件支持弹性滚动

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

滚动传播：当页面包含多个滚动区域时，滚完一个区域后若还存在滚动动量则会将这些剩余动量传播到下一个滚动区域，造成该区域也滚动起来。

// 禁止 滚动传播
.elem {
    overscroll-behavior: contain;
}

在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的padding-right为滚动条宽度，就能有效消除这个不良影响。

每个移动端浏览器的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度。

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

有时不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作，声明touch-callout:none禁止用户长按操作。

有时不想用户复制粘贴盗文案，声明user-select:none禁止用户长按操作和选择复制。

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

注意：需排除 input 和 textarea否则无法输入

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;
}

使用appearance:none美化表单元素样式

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

美化滚动条

// 滚动条整体部分
::-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);
}

美化输入占位

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

对齐下拉选项

// 右对齐
select option {
    direction: rtl;
}

在苹果系统上有些情况下非可点击元素监听click事件可能会无效，针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决。

.elem {
    cursor: pointer;
}

若接口返回字段包含\n或<br>，千万别替换掉，可声明white-space:pre-line交由浏览器做断行处理

* {
    white-space: pre-line;
}

优化动画流畅

.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检测用户是否继续执行单击，若是则执行缩放操作，若否则执行点击操作。鉴于该方案的成功，其他移动端浏览器也复制了该方案，现在几乎所有移动端浏览器都配备该功能。

引入fastclick可使用click事件代替tap事件，解决300ms延迟。

import Fastclick from "fastclick";

FastClick.attach(document.body);

移动端浏览器里出现弹窗时，若在屏幕上滑动能触发弹窗底下的内容跟着滚动，如何禁止呢？
当打开弹窗时给<body>声明position:fixed;left:0;width:100%并动态声明top。声明position:fixed会导致<body>滚动条消失，此时会发现虽然无滑动穿透，但页面滚动位置早已丢失。通过scrollingElement获取页面当前滚动条偏移量并将其取负值且赋值给top，那么在视觉上就无任何变化。当关闭弹窗时移除position:fixed;left:0;width:100%和动态top。

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。

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

注意：若在Vue SPA上使用keep-alive也不能让页面刷新，可将接口请求放到beforeRouteEnter()里

当页面同时出现以下三个条件时，键盘占位会把页面高度压缩一部分。当输入完成键盘占位消失后，页面高度有可能回不到原来高度，即输入框失焦后页面未回弹。

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

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

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事件。

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" }));

使用IntersectionObserver实现懒性加载

图片懒加载

<img src="pig.jpg">
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>
    <!-- 很多<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);

大部分移动端浏览器都明确规定不能自动播放媒体或默认屏蔽autoplay，那如何实现媒体自动播放

一般浏览器

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

微信内置浏览器

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

苹果浏览器监听用户首次触摸操作并触发媒体自动播放，而该监听仅此一次
document.body.addEventListener("touchstart", () => {
    // 执行上述媒体自动播放代码
}, { once: true });

摘抄于：https://mp.weixin.qq.com/s/921YtuKTJRE-Pz2WF5OQOg

H5 与移动端交互经验总结

HTML 相关

CSS 相关

JS 方向

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读