H5适配那些事儿 从坑里爬出来的实战经验分享

先看效果，再看代码

大家好，我是前端开发者小张。今天要跟大家分享的是H5适配的一些实战经验。咱们直接进入主题，看看核心代码和用法。

核心代码就这几行

首先要说的是viewport的设置，这是最基本的H5适配手段。简单来说，就是通过meta标签来控制页面在不同设备上的显示效果。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这个meta标签告诉浏览器，页面的宽度等于设备的宽度，初始缩放比例为1.0，并且用户不能手动缩放页面。亲测有效，建议直接用这种方式。

踩坑提醒：这三点一定注意

在实际使用中，有几点需要注意：

• 确保viewport meta标签放在标签内，位置尽量靠前。
• 不要在CSS文件中使用绝对单位（如px），尽量使用相对单位（如rem或vw）。
• 测试时一定要在真实设备上进行，模拟器可能会有一些差异。

三种主流touchmove处理方案

在移动设备上，touch事件的处理也是H5适配中的一个重点。这里介绍三种常见的处理方案。

方案一：禁止默认行为

最简单的方法是直接阻止touchmove事件的默认行为，防止页面滚动。

document.body.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, { passive: false });

这里注意下，passive: false 是必需的，否则在某些浏览器中可能会报错。

方案二：局部禁用手势

有时候我们只想在某个特定元素上禁用手势，而不是整个页面。可以用下面的方法：

const element = document.getElementById('myElement');
element.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, { passive: false });

这种方式可以更灵活地控制手势操作，适合一些复杂场景。

方案三：使用第三方库

如果你不想自己写一大堆事件处理代码，可以考虑使用一些成熟的第三方库，比如Hammer.js。

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script>
  const element = document.getElementById('myElement');
  const hammer = new Hammer(element);
  hammer.on('swipe', function() {
    console.log('Swipe detected!');
  });
</script>

Hammer.js 提供了丰富的手势支持，包括滑动、捏合等，非常适合做复杂的交互。

谁更灵活？谁更省事？

这三种方案各有优劣：

• 第一种方法简单粗暴，适用于大多数情况，但不够灵活。
• 第二种方法可以针对特定元素进行控制，灵活性更高，但代码量稍多。
• 第三种方法使用第三方库，功能强大，但需要引入额外的依赖。

我个人比较喜欢第二种方法，因为它既灵活又不引入额外的依赖。当然，具体选择哪种方案还是要根据项目的实际需求来定。

响应式设计的几个小技巧

除了上面提到的基本适配方法，还有一些响应式设计的小技巧值得分享。

使用CSS媒体查询

通过CSS媒体查询，可以根据不同的屏幕尺寸应用不同的样式。例如：

/* 默认样式 */
body {
  font-size: 16px;
}

/* 小屏幕设备 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

这种做法可以让你的页面在不同设备上看起来更加自然。

使用REM单位

REM单位是相对于根元素（html）的字体大小计算的，这样可以更方便地实现响应式布局。

html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

.container {
  width: 10rem; /* 10 * 16px = 160px */
}

这种方式的好处是，你只需要调整根元素的字体大小，所有基于REM单位的元素都会自动调整。

总结一下

以上就是我关于H5适配的一些实战经验。从viewport设置到touch事件处理，再到响应式设计的小技巧，希望对你有所帮助。这个技术的拓展用法还有很多，后续会继续分享这类博客。

如果有更好的实现方式或者有什么问题，欢迎评论区交流！