移动端H5踩坑记录

最新推荐文章于 2024-09-26 19:50:45 发布

xiaoLiang o

最新推荐文章于 2024-09-26 19:50:45 发布

阅读量152

点赞数

分类专栏： HTML 文章标签： html5 css html

本文链接：https://blog.csdn.net/qq_42445025/article/details/120749632

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客探讨了移动端H5开发中遇到的一些常见问题，包括如何通过URLScheme唤醒原生应用，优化弹性滚动，禁止屏幕抖动，解决点击无效的问题，以及处理点击穿透。此外，还提到了文本溢出的处理方法，修复高度坍塌的策略，输入监听的注意事项，特别是针对苹果系统的输入事件问题。

摘要由CSDN通过智能技术生成

移动端H5踩坑

唤醒原生应用
- 通过location.href与原生简历通讯渠道，这种页面与客户端的通讯方式称为URL Scheme，基本格式为scheme://[path] [?query]
支持弹性滚动
- 在苹果系统上非``元素的滚动操作可能会存在卡顿，但安卓系统不会出现该情况。通过声明overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动，增加页面滚动的流畅度。
- ```
body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}
```
禁止屏幕抖动
- 每个移动端浏览器的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算。
- ```
body {
    padding-right: calc(100vw - 100%);
}
```
点击无效
- 在苹果系统上有些情况下非可点击元素监听click事件可能会无效，针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决。
- ```
.elem {
    cursor: pointer;
}
```

描述像素边框

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

点击穿透
- 在移动端浏览器上不使用click事件而使用touch事件是因为click事件有着明显的延迟，后续又出现fastclick。该解决方案监听用户是否做了双击操作，可正常使用click事件，而点击穿透就交给fastclick自动判断。
修复高度坍塌
- 当页面同时出现以下三个条件时，键盘占位会把页面高度压缩一部分。当输入完成键盘占位消失后，页面高度有可能回不到原来高度，产生坍塌导致Webview底色露脸，简单概括就是输入框失焦后页面未回弹。
  - 页面高度过小
  - 输入框在页面底部或视窗中下方
  - 输入框聚焦输入文本
  只要保持前后滚动条偏移量一致就不会出现上述问题。在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。
```
const input = document.getElementById("input");
let scrollTop = 0;
input.addEventListener("focus", () => {
    scrollTop = document.scrollingElement.scrollTop;
});
input.addEventListener("blur", () => {
    document.scrollingElement.scrollTo(0, scrollTop);
});
```
输入监听
- 在苹果系统上的输入框输入文本，keyup/keydown/keypress事件可能会无效。当输入框监听keyup事件时，逐个输入英文和数字会有效，但逐个输入中文不会有效，需按回车键才会有效。
  
  此时可用input事件代替输入框的keyup/keydown/keypress事件。