likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 14
点击在线阅读，体验更好链接
现代JavaScript高级小册链接
深入浅出Dart链接
现代TypeScript高级小册链接
linwu的算法笔记📒链接

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

响应式布局

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

⭐️⭐️rem布局

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/flexible.js/0.3.2/flexible.min.js"></script>

配合使用 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="tel:1234567890">Call me</a>

调用短信

<a href="sms:1234567890">Send me a SMS</a>

调用邮件

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

调用图库和文件功能

<input type="file" accept="image/*">

弹出数字键盘：

适合输入电话号码

<input type="tel">

适合输入纯数字格式

<input type="number" pattern="\d*">

⭐️⭐️忽略自动识别

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

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">

⭐️⭐️唤醒原生应用：

URL Scheme 示例

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

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

禁止页面缩放和缓存

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

⭐️⭐️禁止字母大写：

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

<input type="text" autocapitalize="off" autocorrect="off">

针对特定浏览器的配置：

Safari私有属性示例

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

⭐️⭐️监听屏幕旋转

通过使用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 进行特殊适配。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  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 延迟。

function tap(obj, callback) {
    var startTime = 0;
    var flag = false;

    obj.addEventListener('touchstart', function(e) {
        startTime = Date.now();
    });

    obj.addEventListener('touchmove', function(e) {
        flag = true;
    });

    obj.addEventListener('touchend', function(e) {
        if (!flag && (Date.now() - startTime) < 150) {
            callback && callback();
        }
        flag = false;
        startTime = 0;
    });
}
  1. 使用 FastClick 库：FastClick 库可以解决 click 延时和穿透问题。
<script type='application/javascript' src='/path/to/fastclick.js'></script>
if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
		FastClick.attach(document.body);
	}, false);
}
  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> <!-- sticky wrapper, IMPORTANT -->
    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垂直居中为什么会偏离？

解决方案

采用 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])
}