H5移动端开发常用技巧

秒速五厘米 2021-08-13 15:53 506阅读 0赞

转载自：https://juejin.im/post/5d6e1899e51d453b1e478b29

`viewport`、`强制浏览器全屏`、`IOS的Web APP模式`、`可点击元素出现阴影`（这个我觉得真没必要去掉，用户点击是需要反馈的，而这个背景色刚刚好提供了一种反馈）等等，太多啦，这些相信大家百度一下就可以查到很多资料?

本篇文章主要是讲一些其他的或者优化手段。内容不多?

1. 弹出数字键盘

<input type="tel">
    
    
    <input pattern="\d*">
    复制代码

`安卓`跟`IOS`的表现形式应该不一样，大家可以自己试试。当运用了正则`pattern`后，就不用关注`input`的类型了?

![format_png][]

2. 调用系统的某些功能

<a href="tel:10086">打电话给: 10086</a>
    
    
    <a href="sms:10086">发短信给: 10086</a>
    
    
    <a href="mailto:839626987@qq.com">发邮件给：839626987@qq.com</a>
    
    
    <input type="file" accept="image/*">
    
    
    <input type="file" accept="video/*">
    
    
    <input type="file" multiple>
    复制代码

同上?‍♂️

![format_png 1][]

3. 打开原生应用

<a href="weixin://">打开微信</a>
    <a href="alipays://">打开支付宝</a>
    <a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫功能</a>
    <a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>
    复制代码

这种方式叫做`URL Scheme`，是一种协议，一般用来访问`APP`或者`APP`中的某个功能/页面（如唤醒`APP`后打开指定页面或者使用某些功能）?

`URL Scheme`的基本格式如下：

行为(应用的某个功能/页面)    
                |
    scheme://[path][?query]
       |               |
    应用标识       功能需要的参数
    复制代码

一般是由`APP`开发者自己定义，比如规定一些`参数`或者`路径`让其他开发者来访问，就像上面的例子?

注意事项：

*  唤醒`APP`的条件是你的手机已经安装了该`APP`
 *  某些浏览器会禁用此协议，比如微信内部浏览器（除非开了白名单）

![format_png 2][]

后面应该会专门写一篇文章用来探讨唤醒`APP`?

4. 解决active伪类失效

<body ontouchstart></body>
    复制代码

给`body`注册一个空事件即可?

5. 忽略自动识别

<meta name="format-detection" content="telephone=no">
    
    
    <meta name="format-detection" content="email=no">
    复制代码

当页面上的内容包含了`手机号/邮箱`等，会自动转换成可点击的链接?

比如你有如下代码：

<p>13192733603</P>
    复制代码

但是有些浏览器会识别为手机，并且可以点击拨号?

6. 解决input失焦后页面没有回弹

![format_png 3][]

一般出现在`IOS设备中的微信内部浏览器`，出现的条件为：

*  页面高度过小
 *  聚焦时，页面需要往上移动的时候

所以一般`input`在页面上方或者顶部都不会出现无法回弹?

解决办法为，在聚焦时，获取当前滚动条高度，然后失焦时，赋值之前获取的高度：

<template>
      <input type="text" @focus="focus" @blur="blur">
    </template>
    
    <script>
      export default {
        data() {
          return {
            scrollTop: 0
          }
        },
        
        methods: {
          focus() {
            this.scrollTop = document.scrollingElement.scrollTop;
          },
          
          blur() {
            document.scrollingElement.scrollTo(0, this.scrollTop);
          }
        }
      }
    </script>
    复制代码

6. 禁止长按

![format_png 4][]

以上行为可以总结成这几个（每个手机以及浏览器的表现形式不一样）：`长按图片保存`、`长按选择文字`、`长按链接/手机号/邮箱时呼出菜单`。

想要禁止这些浏览器的默认行为，可以使用以下`CSS`：

// 禁止长按图片保存
    img {
      -webkit-touch-callout: none;
      pointer-events: none; // 像微信浏览器还是无法禁止，加上这行样式即可
    }
    
    // 禁止长按选择文字
    div {
      -webkit-user-select: none;
    }
    
    // 禁止长按呼出菜单
    div {
      -webkit-touch-callout: none;
    }
    复制代码

7. 滑动不顺畅，粘手

一般出现在`IOS`设备中，自定义盒子使用了`overflow: auto || scroll`后出现的情况。

优化代码：

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

8. 屏幕旋转为横屏时，字体大小会变

具体出现的情况不明?，有时候有有时候没有，欢迎指出。

优化代码：

* {
      -webkit-text-size-adjust: 100%;
    }
    复制代码

9. 最简单的rem自适应

大家都知道，`rem`的值是根据`根元素的字体大小`相对计算的，但是我们每个设备的大小不一样，所以`根元素的字体大小`要动态设置?

html {
     font-size: calc(100vw / 3.75);
    }
    
    body {
      font-size: .14rem;
    }
    复制代码

效果如下：

![format_png 5][]

像我一般的话，直接搞`lib-flexible`、`postcss-pxtorem`就完事啦！

10. 滑动穿透

当你想在出现`遮罩`的时候，锁住用户的滚动行为，你可以这么做。

假设`HTML`结构如下：

<div class="mask">
      <div class="content">我是弹框</div>
    </div>
    复制代码

`CSS`样式如下：

.mask {
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: rgba($color: #333, $alpha: .6);
    
      .content {
        padding: 20px;
        background-color: #fff;
        width: 300px;
      }
    }
    复制代码

效果如下：

![format_png 6][]

可以看到，当在`遮罩`上滑动的时候，是会穿透到父节点的，最简单的办法就是阻住默认行为：

document.querySelector(".mask").addEventListener("touchmove", event => {
      event.preventDefault();
    });
    复制代码

如果在`vue`中，你可以这么写：

<div class="mask" @touchumove.prevent></div>
    复制代码

如果`.content`也有滚动条，那么只要阻止`遮罩`本身就行：

document.querySelector(".mask").addEventListener("touchmove", event => {
      if (event.target.classList.contains("mask")) event.preventDefault();
    });
    复制代码

或者：

<div class="mask" @touchumove.self.prevent></div>
    复制代码

这样，当出现`遮罩`的时候用户的滑动就会被锁住啦?

[format_png]: /images/20210813/3a9561c28058464f8a389ca77cf8bc36.png
[format_png 1]: /images/20210813/4624d5188cd34d99beb30acbb02037a3.png
[format_png 2]: /images/20210813/4201d96f81134781bb4f60d7c7a7757e.png
[format_png 3]: /images/20210813/a3979c2b39164d1e884bbbc35f7df5ea.png
[format_png 4]: /images/20210813/936c0725c3554b4f84d79dd08d02d651.png
[format_png 5]: /images/20210813/134be743b3a846cdbd9c46e7deebd64f.png
[format_png 6]: /images/20210813/996fc5a5721a4658adb59f2e209ad65a.png