一站式解决：H5开发全攻略，看这篇让你省时又省力

不念不忘少年蓝@ 2024-04-22 19:22 101阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th><a href="https://www.coding-time.cn" rel="nofollow">点击在线阅读，体验更好</a></th> 
   <th><a href="https://www.coding-time.cn" rel="nofollow">链接</a></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">现代JavaScript高级小册</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">深入浅出Dart</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">现代TypeScript高级小册</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn/lc" rel="nofollow">linwu的算法笔记?</a></strong></td> 
   <td><a href="https://www.coding-time.cn/lc" rel="nofollow">链接</a></td> 
  </tr> 
 </tbody> 
</table>

> 在腾讯做的是H5开发相关的项目，也就是做了很久的切图仔了，分享些H5相关的踩坑经验

### 响应式布局 ###

在 H5 中，我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素（对于 REM）或视口宽度（对于 VW）的大小变化而变化，从而适应不同尺寸的屏幕。

#### ⭐️⭐️rem布局 ####

引入手淘的`flexible`方案进行REM布局

配合使用 `postcss-pxtorem` 插件来自动将 px 单位转换为 REM 单位

module.exports = {
        
      plugins: {
        
        'postcss-pxtorem': {
        
          rootValue: 37.5,  // 该值应与 flexible.js 中设置的 remUnit 值相同
          propList: ['*'],
          minPixelValue: 2  // 设置最小的转换尺寸，如果设置为 1 则会转换所有大小的像素值
        }
      }
    }

注意：以上 `rootValue` 的设置值是基于设计稿的尺寸。例如，如果你的设计稿是 750px，那么你设置 `rootValue: 75`。如果你的设计稿是 375px，那么你设置 `rootValue: 37.5`。这样设置后，设计稿上的 1px 就对应于 1/100rem，方便转换。

#### ⭐️⭐️vw布局 ####

npm install postcss-px-to-viewport --save-dev

module.exports = {
        
      plugins: {
        
        'postcss-px-to-viewport': {
        
          unitToConvert: 'px',  // 要转化的单位
          viewportWidth: 750,  // UI设计稿的宽度
          unitPrecision: 5,  // 转换后的精度，即小数点位数
          propList: ['*'],  // 指定转换的css属性的单位，*表示全部css属性的单位都进行转换
          viewportUnit: 'vw',  // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw',  // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: [],  // 指定不转换为视窗单位的类名，
          minPixelValue: 1,  // 默认值1，小于或等于1px则不进行转换
          mediaQuery: false,  // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true,  // 是否直接更换属性值，而不添加备用属性
          exclude: [],  // 忽略某些文件夹下的文件或特定文件，例如 'node_modules'，使用正则表达式
          include: undefined,  // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件（使用正则表达式）
          landscape: false,  // 是否处理横屏情况
        },
      },
    };

在你配置完成后，你可以像平时一样在 CSS 中使用 px 单位，然后 `postcss-px-to-viewport` 会在构建时自动将 px 单位转换为 vw 单位。

### ⭐️⭐️系统功能： ###

#### 调用电话 ####

#### 调用短信 ####

#### 调用邮件 ####

<a href="mailto:example@example.com">Email me</a>

#### 调用图库和文件功能 ####

#### 弹出数字键盘： ####

适合输入电话号码

适合输入纯数字格式

### ⭐️⭐️忽略自动识别 ###

禁止移动端浏览器自动识别电话和邮箱

### ⭐️⭐️唤醒原生应用： ###

URL Scheme 示例

<a href="twitter://user?screen_name=OpenAI">Open Twitter</a>

### ⭐️⭐️禁止页面缩放和缓存： ###

禁止页面缩放和缓存

### ⭐️⭐️禁止字母大写： ###

禁止字母大写功能和自动纠正功能

针对特定浏览器的配置：

Safari私有属性示例

### ⭐️⭐️监听屏幕旋转 ###

通过使用CSS媒体查询中的`orientation`选择器，您可以监听屏幕的旋转事件，并根据屏幕方向调整样式，以便页面始终保持最佳布局。

@media (orientation: portrait) {
        
      /* 在竖屏模式下的样式 */
    }
    
    @media (orientation: landscape) {
        
      /* 在横屏模式下的样式 */
    }

### ⭐️⭐️禁止滚动传播 ###

使用`overscroll-behavior: contain`属性可以阻止滚动传播的问题。当内容滚动到顶部或底部时，滚动事件不会继续传递给父容器。

.container {
        
      overscroll-behavior: contain;
    }

### ⭐️⭐️禁止屏幕抖动 ###

通过提前声明滚动容器的`padding-right`为滚动条宽度，可以防止滚动条的出现导致屏幕抖动。

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

### ⭐️⭐️禁止长按操作 ###

使用`user-select: none`和`-webkit-touch-callout: none`属性可以禁止用户对元素进行长按操作，防止出现意外的行为。

.element {
        
      user-select: none;
      -webkit-touch-callout: none;
    }

### ⭐️⭐️禁止字体调整 ###

通过设置`text-size-adjust: 100%`属性，可以阻止用户在旋转屏幕时浏览器自动调整字体大小。

body {
        
      text-size-adjust: 100%;
    }

### ⭐️⭐️禁止高亮显示 ###

使用`-webkit-tap-highlight-color: transparent`属性可以禁止触摸元素时的高亮显示效果，使界面更加平滑和一致。

.element {
        
      -webkit-tap-highlight-color: transparent;
    }

### ⭐️⭐️禁止动画闪屏 ###

通过使用`perspective`、`backface-visibility`和`transform-style`属性，可以解决在移动设备上动画闪屏的问题，提供更流畅的动画效果。

.element {
        
      perspective: 1000px;
      backface-visibility: hidden;
      transform-style: preserve-3d;
    }

### ⭐️⭐️自定义表单外观 ###

使用`appearance: none`属性可以自定义表单元素的样式，使其更符合您的设计需求。

input[type="text"],
    input[type="email"],
    textarea {
        
      appearance: none;
    }

### ⭐️⭐️自定义滚动滚动条 ###

通过使用`::-webkit-scrollbar-*`伪元素，可以自定义滚动条的样式，使其更加美观。

.scrollable::-webkit-scrollbar {
        
      width: 8px;
    }
    
    .scrollable::-webkit-scrollbar-thumb {
        
      background-color: #ccc;
    }
    
    .scrollable::-webkit-scrollbar-track {
        
      background-color: #f1f1f1;
    }

### ⭐️⭐️自定义输入占位文本样式 ###

使用`::-webkit-input-placeholder`伪元素，可以自定义输入框的占位文本样式，使其更加吸引人。

input::placeholder {
        
      color: #999;
    }

### ⭐️⭐️调整输入框文本 ###

通过设置`line-height: normal`，可以调整输入框的文本位置，使其垂直居中显示。

input {
        
      line-height: normal;
    }

### ⭐️⭐️对齐下拉选项 ###

通过设置`direction: rtl`，可以改变下拉框选项的对齐方式，使其从右向左排列。

select {
        
      direction: rtl;
    }

### ⭐️⭐️修复点击无效 ###

在苹果系统上，有些元素无法触发`click`事件。通过声明`cursor: pointer`属性，可以解决这个问题。

.element {
        
      cursor: pointer;
    }

### ⭐️⭐️识别文本换行 ###

通过设置`white-space: pre-line`，可以让浏览器自动处理文本的换行，保留原始的换行符。

.element {
        
      white-space: pre-line;
    }

### ⭐️⭐️开启硬件加速 ###

使用`transform: translate3d(0, 0, 0)`属性可以开启GPU硬件加速，提高动画的流畅性和性能。

.element {
        
      transform: translate3d(0, 0, 0);
    }

### ⭐️⭐️控制溢出文本 ###

使用CSS的`text-overflow`、`white-space`、`-webkit-line-clamp`和`-webkit-box-orient`属性，可以控制文本的单行和多行溢出，使其更加易读。

.element {
        
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .element.multiline {
        
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

### ⭐️⭐️⭐️⭐️⭐️iPhoneX 系列手机适配问题 ###

#### 现象 ####

在 iPhoneX 系列手机上，头部或底部区域可能会出现刘海遮挡文字或点击区域的情况，或者出现黑底或白底的空白区域。

#### 原因 ####

iPhoneX 及以上版本手机采用了特殊的设计，包括状态栏、圆弧展示角、传感器槽、主屏幕指示器和屏幕边缘手势。为了适配这些特性，头部、底部及侧边栏都需要做特殊处理，使 content 尽可能地处于安全区域内。

#### 解决方案 ####

1.  设置 viewport-fit meta 标签为 cover，使内容能够填充所有区域，并对 iPhone X 进行特殊适配。

1.  利用 WebKit 的新 CSS 函数 constant() 和 env()，以及四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top 和 safe-area-inset-bottom，来设置安全区域。

body {
        
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
        padding-left: constant(safe-area-inset-left);
        padding-left: env(safe-area-inset-left);
        padding-right: constant(safe-area-inset-right);
        padding-right: env(safe-area-inset-right);
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

1.  为底部固定的元素增加适应 iPhoneX 系列手机的底部小黑条和圆角的底部高度。

### ⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题 ###

#### 现象 ####

在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作。此外，点击穿透问题也常见，如点击蒙层，蒙层消失后可能会触发蒙层下层元素的点击事件。

#### 解决方案 ####

1.  禁止缩放：通过设置 meta 标签的 `user-scalable=no`来禁止用户缩放。
2.  使用 touch 事件替代 click 事件：这可以消除延迟，因为 touch 事件没有 300ms 延迟。

1.  使用 FastClick 库：FastClick 库可以解决 click 延时和穿透问题。

1.  使用 CSS 的 pointer-events 属性：通过设置 pointer-events: none，可以让鼠标点击事件失效，从而解决点击穿透问题。

.element {
        
        pointer-events: none;
    }

### ⭐️⭐️⭐️⭐️⭐️1px 问题 ###

#### 现象 ####

在 H5 页面中，可能需要设置边框宽度为 1px，但在 Retina 屏幕上，1px 可能会看起来比实际要粗。

#### 原因 ####

这是因为移动设备的物理像素密度与 CSS 像素的比例（设备像素比）导致的。

#### 解决方案 ####

1.  利用伪元素和 scale 来实现 0.5px 的效果。

.border-1px {
        
        position: relative;
    }
    
    .border-1px:after {
        
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        border: 1px solid #000;
        transform: scale(0.5);
        transform-origin: left top;
        box-sizing: border-box;
    }

### ⭐️⭐️⭐️⭐️⭐️sticky 的兼容性问题 ###

#### 现象 ####

在某些 Android 设备的原生浏览器中，使用 position: sticky 实现的元素不能正常吸顶。

#### 原因 ####

这是因为这些浏览器不支持 position: sticky。

#### 解决方案 ####

1.  使用 react-sticky 组件：通过计算 `<Sticky>` 组件相对于`<StickyContai ner>`组件的位置进行工作。

npm install react-sticky
    <StickyContainer>
      <Sticky>{
        ({
          style }) => <h1 style={
        style}>Sticky element</h1>}</Sticky>
    </StickyContainer>

1.  使用 JS：通过自定义滚动事件的监听，根据 top 的改变来实现吸顶层 fixed 和 absolute 的转换。

<div id="stickyElement">吸顶bar</div>
    <div id="content">这是主要内容</div>
    <script>
        window.addEventListener('scroll', function() {
          
        var stickyElement = document.getElementById('stickyElement');
        var stickyElementRect = stickyElement.getBoundingClientRect();
        if (stickyElementRect.top <= 0) {
          
            // 当元素到达顶部，将其定位方式改为固定
            stickyElement.style.position = 'fixed';
            stickyElement.style.top = '0';
          } else {
          
            // 当元素离开顶部，将其定位方式改回绝对
            stickyElement.style.position = 'absolute';
            stickyElement.style.top = 'initial';
          }
        });
    
    </script>
    ``
    
    `
    
    3. 在 Vue 项目中，可以直接使用 vue-sticky 组件。
    
    ```js
    npm install vue-sticky --save
    directives: {
      'sticky': VueSticky,
    }
    <ELEMENT v-sticky="{ zIndex: NUMBER, stickyTop: NUMBER, disabled: [true|false]}">
      <div> 
        CONTENT
      </div>
    </ELEMENT>

### ⭐️⭐️⭐️⭐️⭐️软键盘将页面顶起来、收起未回落问题 ###

#### 现象 ####

在 Android 设备上，点击 input 框弹出键盘时，可能会将页面顶起来，导致页面样式错乱。失去焦点时，键盘收起，键盘区域空白，未回落。

#### 原因 ####

键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。

兼容原理，1.判断版本类型 2.更改滚动的可视区域

#### 解决方案 ####

通过监听页面高度变化，强制恢复成弹出前的高度。

const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
    
    window.onresize = function() {
        
        const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
    
        if (resizeHeight < originalHeight) {
        
            document.documentElement.style.height = originalHeight + 'px';
            document.body.style.height = originalHeight + 'px';
        }
    }

### ⭐️⭐️⭐️⭐️⭐️使用 line-height 实现文字垂直居中，发现文字偏上 ###

> 实际这个Bug一直存在，没有好的解决方案，详情见[Android浏览器下line-height垂直居中为什么会偏离？][Android_line-height]

#### 解决方案 ####

采用 flex 布局，align-items: center 来替代，兼容性更高。

.elem {
        
      display: flex;
      justify-content: center;
      align-items: center;
    }

### ⭐️⭐️border-radius 画出的圆在移动端有毛边 ###

#### 解决方案 ####

给元素添加 overflow: hidden 属性。

.elem {
        
      overflow: hidden;
    }

### ⭐️⭐️安卓上去掉语音输入按钮 ###

input::-webkit-input-speech-button {
        
      display: none;
    }

### ⭐️⭐️Vue 单页应用在 iOS 上微信分享失效，图片，标题和描述均未正常显示，安卓上分享正常 ###

#### 原因 ####

我们一般在 APP.vue 的 mounted 生命周期中初始化微信 SDK，此时页面的地址 hash 是\#/，而首页的 hash 是\#/home，导致初始化微信 SDK 时传入的分享 url 和用户实际触发分享操作时页面的 url 不一致，致使在 iOS 上分享失败。

#### 解决方案 ####

初始化微信分享 SDK 时传入的地址，和实际触发分享时页面的地址保持一致。

### ⭐️⭐️iOS safari 被点击元素会出现半透明灰色遮罩 ###

#### 解决方案 ####

给 html 或者 body 加入以下 css 代码。

body {
        
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-user-modify: read-write-plaintext-only;
    }

### ⭐️⭐️iOS 禁止保存或拷贝图像 ###

#### 解决方案 ####

长按图片保存场景下，禁止 IOS 默认识别图像行为。

img {
        
      -webkit-touch-callout: none;
    }

### ⭐️⭐️⭐️iOS 端微信 H5 页面上下滑动时卡顿 ###

#### 解决方案 ####

给滚动元素加上`-webkit-overflow-scrolling`属性。

body {
        
      -webkit-overflow-scrolling：touch;
    }

### ⭐️⭐️iOS 默认输入框内阴影重置 ###

#### 解决方案 ####

阻止 iOS 默认的美化页面的策略-webkit-appearance：none;

input {
        
      border: 0;
      -webkit-appearance：none;
    }

### ⭐️⭐️⭐️对非可点击元素(div，span 等)监听 click 事件，部分 ios 版本不会触发事件 ###

#### 解决方案 ####

1.  添加 css 属性 cursor: pointer;
2.  换成 button 元素。

cursor: pointer;
    
    <button></button>

### ⭐️⭐️⭐️手机底部刘海存在背景，和页面背景色不一致 ###

#### 解决方案 ####

通过指定 body 的背景色来解决。

body {
        
      background-color: #fff;
      // or 暗色模式
      // background-color: #000;
    }

### ⭐️⭐️对于带有 hash 的 H5 链接，部分手机厂商的 webview 打开 H5 页面会加载两次 ###

#### 解决方案 ####

这是部分 webview 对于特殊 url 有独特的解析和加载逻辑，去掉 hash 即可

https://www.example.com/a/b#/

### ⭐️⭐️body存在默认背景色 ###

#### 解决方案 ####

body 标签在大部分浏览器中的默认背景色是白色，但在极少数浏览器中的背景颜色是淡绿色或者其他颜色。通过指定 body 背景色为\#fff，来兼容更多设备。

body {
        
      background-color: #fff;
    }

### ⭐️⭐️旋转屏幕的时候，字体大小调整的问题 ###

css
    body {
      -webkit-text-size-adjust: 100%;
    }

### ⭐️⭐️IOS解析日期问题 ###

在某些情况下，苹果系统上解析 `YYYY-MM-DD HH:mm:ss` 格式的日期会报错 `Invalid Date`，而安卓系统则没有这个问题。解决这个问题的一种方法是将日期字符串中的 `-` 替换为 `/`。

const dateString = "2023-07-16 00:00:00";
    const fixedDateString = dateString.replace(/-/g, "/");
    const date = new Date(fixedDateString);

### ⭐️⭐️⭐️⭐️⭐️滚动穿透 ###

#### 现象 ####

滚动穿透（scrolling through）是指在一个固定区域内滚动时，滚动事件透过该区域继续传递到其下方的元素，导致同时滚动两个区域的现象。滚动穿透可能会对用户体验产生负面影响，因为用户可能意外地滚动到不相关的内容。

#### 解决方案 ####

> 这个问题一直很无解，只能hack去兼容

#### overflow: hidden ####

1.先锁住body

.modal-open {
        
      &,
      body {
        
        overflow: hidden;
        height: 100%;
      }
    }

2.还原body滚动区域

// 获取滚动区域的容器元素
    const container = document.querySelector('.container');
    
    // 获取滚动区域的内容元素
    const content = document.querySelector('.content');
    
    // 记录滚动位置
    let scrollTop = 0;
    
    // 禁止滚动穿透
    function disableScroll() {
        
      // 记录当前滚动位置
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      // 设置滚动区域容器的样式，将其高度设置为固定值，并设置滚动条样式
      container.style.height = '100%';
      container.style.overflow = 'hidden';
      
      // 阻止窗口滚动
      document.body.classList.add('no-scroll');
      document.body.style.top = `-${
          scrollTop}px`;
    }
    
    // 启用滚动穿透
    function enableScroll() {
        
      // 恢复滚动区域容器的样式
      container.style.height = '';
      container.style.overflow = '';
    
      // 允许窗口滚动
      document.body.classList.remove('no-scroll');
      document.body.style.top = '';
    
      // 恢复滚动位置
      window.scrollTo(0, scrollTop);
    }
    
    // 示例使用，当某个事件触发时禁止滚动穿透
    function disableScrollEvent() {
        
      disableScroll();
    }
    
    // 示例使用，当某个事件触发时启用滚动穿透
    function enableScrollEvent() {
        
      enableScroll();
    }

#### ant-mobile组件库解决方式 ####

思想思路：

*  针对触摸滑动事件 `touchmove`，通过监听滑动方向和滚动元素的状态，决定是否阻止默认的滑动行为，从而防止滚动穿透。
 *  在需要锁定滚动的情况下，给 `document` 添加 `touchstart` 和 `touchmove` 事件的监听器，通过捕获触摸滑动事件，并根据情况阻止默认行为，从而避免滚动穿透。
 *  在解锁滚动时，从 `document` 移除对触摸事件的监听器，恢复默认的滑动行为。

// 移植自vant：https://github.com/youzan/vant/blob/HEAD/src/composables/use-lock-scroll.ts
    export function useLockScroll(
      rootRef: RefObject<HTMLElement>,
      shouldLock: boolean | 'strict'
    ) {
      const touch = useTouch()
    
      const onTouchMove = (event: TouchEvent) => {
        touch.move(event)
    
        const direction = touch.deltaY.current > 0 ? '10' : '01'
        const el = getScrollParent(
          event.target as Element,
          rootRef.current
        ) as HTMLElement
        if (!el) return
    
        // This has perf cost but we have to compatible with iOS 12
        if (shouldLock === 'strict') {
          const scrollableParent = getScrollableElement(event.target as HTMLElement)
          if (
            scrollableParent === document.body ||
            scrollableParent === document.documentElement
          ) {
            event.preventDefault()
            return
          }
        }
    
        const { scrollHeight, offsetHeight, scrollTop } = el
        let status = '11'
    
        if (scrollTop === 0) {
          status = offsetHeight >= scrollHeight ? '00' : '01'
        } else if (scrollTop + offsetHeight >= scrollHeight) {
          status = '10'
        }
    
        if (
          status !== '11' &&
          touch.isVertical() &&
          !(parseInt(status, 2) & parseInt(direction, 2))
        ) {
          if (event.cancelable) {
            event.preventDefault()
          }
        }
      }
    
      const lock = () => {
        document.addEventListener('touchstart', touch.start)
        document.addEventListener(
          'touchmove',
          onTouchMove,
          supportsPassive ? { passive: false } : false
        )
    
        if (!totalLockCount) {
          document.body.classList.add(BODY_LOCK_CLASS)
        }
    
        totalLockCount++
      }
    
      const unlock = () => {
        if (totalLockCount) {
          document.removeEventListener('touchstart', touch.start)
          document.removeEventListener('touchmove', onTouchMove)
    
          totalLockCount--
    
          if (!totalLockCount) {
            document.body.classList.remove(BODY_LOCK_CLASS)
          }
        }
      }
    
      useEffect(() => {
        if (shouldLock) {
          lock()
          return () => {
            unlock()
          }
        }
      }, [shouldLock])
    }

[Android_line-height]: https://www.zhihu.com/question/39516424