移动端H5踩坑记录

移动端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事件。