移动端H5网页开发常见问题汇总

最新推荐文章于 2024-02-28 14:16:11 发布

barnett_y

最新推荐文章于 2024-02-28 14:16:11 发布

阅读量1k

点赞数 1

分类专栏：【前端收集知识点】文章标签：前端

原文链接：https://juejin.cn/post/7055599228478816270?utm_source=gold_browser_extension

版权

【前端收集知识点】专栏收录该内容

75 篇文章 10 订阅

订阅专栏

简介

前面笔者已经介绍了 2022-移动端H5网页开发必备知识，这篇文章主要是总结下移动端开发常见问题，帮助大家一起避坑。

HTML方面

调用系统功能

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

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

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

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

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

<!-- 选择文件 -->
<input type="file" />

<!-- 多选文件 -->
<input type="file" multiple />
复制代码

忽略自动识别

有时电话、邮箱的自动识别会很烦，我们可以关闭。

<!-- 忽略自动识别电话 -->
<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*">
复制代码

禁止页面缓存

<meta http-equiv="Cache-Control" content="no-cache" />
复制代码

禁止首字母大写

当我们使用键盘在输入框输入英文字符的时候，一般首字母会自动大写，如果不需要可以关闭。

<input autocapitalize="off" autocorrect="off" />
复制代码

禁止页面缩放

不想让页面缩放我们可以把viewport的user-scalable值设置为no，这个在上篇文章介绍viewport的时候有说到。

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

长按识别二维码

有时候我们会接到需求，就是长按二维码要自动识别出二维码，其实这个是最简单的，就是把我们的图片使用img标签展示出来就可以了。记住不要使用背景图，不然会无效。

CSS方面

1px问题

1px问题在Retina 高清屏上才会出现，由于高清屏用多个物理像素显示一个css像素，比如iphone6，由于dpr为2，所以1css像素会用2个物理像素显示，所以看起来1px的线条会特别宽。

解决1px问题的方案有很多，有背景图、阴影、缩放等等，笔者在这里只介绍笔者曾经使用过得方案，就是缩放。原理就是边框固定，把元素整体先放大然后再缩小。

.ele {
    position: relative;
    width: 100px;
    height: 80px;
    &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid red;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: left top;
    }
}
复制代码

如果不想给每个元素都这样设置的话，我们可以采用笔者前面写的2022-移动端H5网页开发必备知识里面介绍的lib-flexible方案，根据dpr将网页整体进行缩放。

横屏和竖屏

在某些特定横屏或者竖屏的情况下的样式我们可以通过如下@media查询进行设置。

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

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

复制代码

让苹果手机滚动更流畅

在苹果手机上滚动的时候有时候可能会不流畅，我们可以给元素添加如下属性。

.elem {
    -webkit-overflow-scrolling: touch;
}
复制代码

禁止选择

有时候我们的图片不想让别人长按保存等操作，我们可以使用如下样式，让用户长按图片无效。

#img1 {
  pointer-events: none; /* 微信浏览器还需附加该属性才有效 */
  user-select: none;
  -webkit-touch-callout: none;
}
复制代码

原生表单美化

我们使用原生表单的时候样式会很丑，特别还有一层灰色的遮罩，我们可以使用如下样式把遮罩进行消除。小伙伴们是不是感觉清爽了很多呢。

button,
input,
select,
textarea {
  -webkit-appearance: none;
}
复制代码

美化滚动条

滚动条样式太丑希望自定义，我们可以使用如下样式属性进行自定义样式。这个是pc端和移动端通用的样式。

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

::-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);
}
复制代码

美化占位符

这个是pc端和移动端通用的样式，当我们需要修改占位符placeholder的颜色我们可以使用如下样式。

input::-webkit-input-placeholder {
    color: red;
}
复制代码

输入框文字居中对齐

有时候我们就算设置了line-height的值等于height，文字看起来也不居中，我们可以使用如下样式。

input {
    line-height: normal;
}
复制代码

文本溢出省略号

当我们需要将多于文本用省略号显示的时候，我们可以用到如下样式。其实这个是pc端和移动端通用的样式。

使用这个样式需要注意，元素必须是块级元素，或者是具有指定宽度的行内块级元素（就是display: inline-block）。

单行省略

/* 单行出现省略号*/
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
复制代码

多行省略

/* 多行省略号，就是想在多少行后再出现省略号就使用如下样式*/
.ellipsis-n {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; /*这个值可以随便设置，比如这里的2就是最多显示两行，两行后出现省略号*/
    -webkit-box-orient: vertical;
}
复制代码

图片模糊问题

这个类似于1px问题，在Retina 高清屏上才会出现，由于高清屏用多个物理像素显示一个css像素，比如iphone6（750个物理像素375个css像素），由于dpr为2，所以1css像素会用2个物理像素显示，所以1像素的图片用2个物理像素显示出来就会模糊。

解决图片模糊根本原因就是根据不同dpr使用不同倍数的图片。

@media查询

.avatar{
    background-image: url(randy_1x.png);
}

@media only screen and (-webkit-min-device-pixel-ratio:2){
    .avatar{
        background-image: url(randy_2x.png);
    }
}

@media only screen and (-webkit-min-device-pixel-ratio:3){
    .avatar{
        background-image: url(randy_3x.png);
    }
}
复制代码

image-set

.avatar {
    background-image: -webkit-image-set( "randy_1x.png" 1x, "randy_2x.png" 2x );
}
复制代码

srcset

这里需要注意，这里的图片不能被webpack处理，就是不能被转成base64，不然会失效。

<img src="randy_1x.png" srcset="randy_2x.png 2x, randy_3x.png 3x" />
复制代码

js处理

const dpr = window.devicePixelRatio;
const images =  document.querySelectorAll('img');
images.forEach((img)=>{
  img.src.replace(".", `${dpr}x.`);
})
复制代码

svg

当然，我们还可以使用不失帧的svg图片，这样就不需要管是什么屏幕了，svg图片会自动拉伸并且不会失帧。

<img src="randy.svg" />
复制代码

JS方面

点击延迟

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

07年，苹果公司发布首款Iphone前夕，遇到一个问题：当时的网站都是为大屏设计，手机屏幕太小无法正常浏览，于是苹果工程师做了一些约定解决此类问题。这些约定当中，最为有名的是双击缩放（double tap to zoom）,这是产生300ms延迟的根源。用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。如果用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。由此产生了300ms延迟问题。

解决点击延迟的方案有很多，下面笔者着重介绍三种。

禁止页面缩放

我们知道点击延迟的根源就是因为页面缩放，所以我们可以把页面禁止缩放，就能从源头上解决该问题了，但是该方案的缺点也很明显，就是页面不能缩放了。

 <!-- 1.禁用缩放 user-scalable=no -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
复制代码

使用zepto

在前端领域里最早解决点击延迟的是jQuery时代的zepto，估计现在大部分同学都未使用过zepto，其实它就是移动端版本的jquery。zepto封装tap事件能有效地解决点击穿透，我们知道移动端点击事件触发的顺序为 touchstart —> touchmove —> touchend —> click，通过监听document上的touch事件（因为click事件在移动端有300ms延迟但是touch事件在移动端没延迟）完成tap事件的模拟，并将tap事件冒泡到document上触发模拟移动端的click事件。

虽然zepto能解决点击延迟问题，但是也会带来点击穿透问题，就是如果某元素下面真实有绑定click的元素，我们知道事件具有传播性，就会在tap事件后会继续触发click，这样就会带来点击穿透问题。

说道这里，细心的小伙伴会发现了，为什么不在touchend事件里面使用e.preventDefault()来阻止后续事件触发呢？其实这跟zepto的tap事件实现有关，因为zepto的tap事件是全局监听touchend事件的，所以如果使用了e.preventDefault()会影响到真正的touchend事件。

使用fastclick

fastclick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。fastclick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

fastclick不但能解决点击延迟而且不会带来点击穿透问题，是点击延迟的最优解。具体使用方法可以查看官方文档。

时间问题

在苹果系统上解析YYYY-MM-DD HH:mm:ss这种日期格式会报错，但在安卓系统上解析这种日期格式完全无问题。但是YYY/MM/DD HH:mm:ss这种日期格式在苹果和安卓上都能正常运行，所以我们只需要统一使用这种方案就可以了。

const date = "2010-12-31 12:30:00";
new Date(date.replace(/\-/g, "/"));
复制代码

滚动到指定位置

这个技巧在pc端和移动端都适用，使用Element.scrollIntoView()方法，我们再也不需要使用window.scrollBy()和window.scrollTo()来实现滚动到指定位置了。

element.scrollIntoView(); // 等同于element.scrollIntoView(true)

element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
复制代码

alignToTop可选,一个Boolean值：

如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions 可选,一个包含下列属性的对象：

behavior 可选，定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
block 可选，定义垂直方向的对齐， "start", "center", "end", 或 "nearest 就近对齐"之一。默认为 "start"。
inline 可选，定义水平方向的对齐， "start", "center", "end", 或 "nearest 就近对齐"之一。默认为 "nearest 就近对齐"。

我们还可以使用该方法滚动到指定元素位置。

// 将ele元素平滑的滚动到窗口顶部
ele.scrollIntoView({ behavior: "smooth" })
复制代码

横屏和竖屏

window.addEventListener("resize", ()=>{
    if (window.orientation === 180 || window.orientation === 0) { 
      // 正常方向或屏幕旋转180度
        console.log('竖屏');
    };
    if (window.orientation === 90 || window.orientation === -90 ){ 
       // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
        console.log('横屏');
    }  
}); 
复制代码

iPhoneX适配

viewport-fit

viewport-fit是专门为了适配iPhoneX而诞生的一个属性，它用于限制网页如何在安全区域内进行展示。

contain: 可视窗口完全包含网页内容
cover：网页内容完全覆盖可视窗口

默认情况下或者设置为auto和contain效果相同。

<meta name="viewport" content="viewport-fit=cover" />
复制代码

env、constant

我们需要将顶部和底部合理的摆放在安全区域内，iOS11新增了两个CSS函数env、constant，用于设定安全区域与边界的距离。

onstant在iOS < 11.2的版本中生效，env在iOS >= 11.2的版本中生效，这意味着我们往往要同时设置他们，将页面限制在安全区域内：

函数内部可以是四个常量：

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

注意：我们必须指定viweport-fit后才能使用这两个函数。

body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
复制代码

参考文章

中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

关于移动端适配，你必须要知道的

2022 年移动端适配方案指南 — 全网最新最全

后记

本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个赞~~

作者：苏苏同学
链接：https://juejin.cn/post/7055599228478816270
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

barnett_y

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
移动端H5网页开发常见问题汇总

简介前面笔者已经介绍了 2022-移动端H5网页开发必备知识，这篇文章主要是总结下移动端开发常见问题，帮助大家一起避坑。HTML方面调用系统功能<a href="tel:10010">拨打电话给10010</a><a href="sms:10010">发送短信给10010</a><a href="mailto:
复制链接

扫一扫