解决方案一：使用小数像素#

1
.box {
2
  border: 0.5px solid #ddd;
3
}

写法简单，但不同浏览器、DPR 下的绘制效果可能不同，不保证最终恰好是一个物理像素。

解决方案二：伪元素 + transform#

需要实现较细的底边框时，可以使用伪元素。

1
.box {
2
  position: relative;
3
}
4

5
.box::after {
6
  content: "";
7
  position: absolute;
8
  left: 0;
9
  right: 0;
10
  bottom: 0;
11
  height: 1px;
12
  background-color: #ddd;
13
  transform-origin: bottom;
14
}
15

16
/* DPR >= 2 */
17
@media (min-resolution: 2dppx) {
18
  .box::after {
19
    transform: scaleY(0.5);
20
  }
21
}
22

23
/* DPR >= 3 */
24
@media (min-resolution: 3dppx) {
25
  .box::after {
26
    transform: scaleY(0.333333);
27
  }
28
}

核心原理是：先绘制 1px 的线，再通过 transform 缩小其视觉厚度。这段代码主要针对常见的 DPR 2、3 屏幕。实际开发建议： 普通边框直接使用 1px 即可。只有设计稿明确要求极细边框时，才需要额外处理。

问题描述#

早期移动浏览器中，手指点击元素后，click 事件可能延迟约 300ms 才执行。

产生原因#

浏览器需要判断用户是在单击还是双击缩放页面。

解决方案一：设置 viewport（推荐）#

1
<meta
2
  name="viewport"
3
  content="width=device-width, initial-scale=1.0"
4
/>

现代主流移动浏览器对已适配移动视口的页面，通常已经移除了这类延迟。

解决方案二：touch-action#

1
button,
2
a {
3
  touch-action: manipulation;
4
}

touch-action: manipulation 允许正常滚动、双指缩放，但禁用双击缩放等手势，从而避免浏览器为了识别双击而推迟 click。

解决方案三：使用 Touch 事件（了解即可）#

1
const button = document.querySelector('button');
2

3
button.addEventListener('touchend', () => {
4
  console.log('手指离开');
5
});

touchend 不需要等待浏览器生成 click，但是还需要自行处理滑动、点击识别以及兼容性事件等问题。

实际开发建议： 现在正常使用 click 就可以，不必为了消除 300ms 延迟而统一改用 touchend，也通常不需要引入旧的 FastClick 库。

问题描述#

当一个元素监听 touchend，另一个元素监听 click，并且两个元素位置重叠时，可能出现点击穿透。

例如：点击弹窗关闭按钮，弹窗关闭之后，下方按钮也被意外触发。

产生原因#

触摸操作结束后，浏览器在某些情况下还会生成兼容性的鼠标事件和 click 事件。若上层元素在 touchend 时被移除，后续 click 可能落到下层元素上。具体表现取决于浏览器及事件处理方式。

解决方案一：统一使用 click（推荐）#

1
const overlay = document.querySelector('.overlay');
2
const button = document.querySelector('.button');
3

4
// 上层弹窗
5
overlay.addEventListener('click', () => {
6
  overlay.remove();
7
});
8

9
// 下层按钮
10
button.addEventListener('click', () => {
11
  console.log('底层按钮被点击');
12
});

上层通过自身的 click 事件关闭，可以避免前面所述的“touchend 先删除上层、click 后触发下层”问题。

解决方案二：阻止默认行为#

如果确实需要使用 Touch 事件，可以阻止触摸操作生成后续兼容性鼠标事件。

1
const overlay = document.querySelector('.overlay');
2

3
overlay.addEventListener(
4
  'touchend',
5
  (event) => {
6
    if (event.cancelable) {
7
      event.preventDefault();
8
    }
9

10
    overlay.remove();
11
  },
12
  { passive: false }
13
);

注意：preventDefault() 可能影响默认交互行为，不能随意对所有触摸事件调用。

解决方案三：使用 Pointer Events#

Pointer Events 可以统一处理鼠标、触摸屏和触控笔。

1
button.addEventListener('pointerdown', (event) => {
2
  console.log(event.pointerType);
3
});

但需要注意：Pointer Events 并不会自动消除所有点击穿透问题。对于普通按钮，依然优先使用 click。

实际开发建议： 普通按钮、弹窗开关使用 click；需要拖拽、滑动等连续手势时再使用 Pointer Events 或 Touch Events。

图片自适应#

图片原始宽度大于移动端容器时，可能发生横向溢出。

1
img {
2
  max-width: 100%;
3
  height: auto;
4
}

max-width: 100% 限制图片最大宽度不超过容器，height: auto 保持原始宽高比。

图片裁剪#

对于商品卡片、头像和文章封面，通常需要固定图片区域的尺寸。

1
img {
2
  width: 100%;
3
  aspect-ratio: 16 / 9;
4
  object-fit: cover;
5
}

cover 常用于封面和商品图，contain 常用于需要完整展示的图片。

高清屏图片模糊#

假设图片在网页中显示宽度为 200px：

如果图片分辨率不够，在高 DPR 屏幕中可能显得模糊。

可以使用 srcset 提供不同分辨率的图片：

1
<img
2
  src="image-200.jpg"
3
  srcset="
4
    image-200.jpg 1x,
5
    image-400.jpg 2x,
6
    image-600.jpg 3x
7
  "
8
  width="200"
9
  alt="示例图片"
10
/>

浏览器会根据设备环境选择合适的图片资源。

响应式图片#

对于不同屏幕宽度，可以提供不同尺寸的图片资源：

1
<img
2
  src="image-800.jpg"
3
  srcset="
4
    image-400.jpg 400w,
5
    image-800.jpg 800w,
6
    image-1200.jpg 1200w
7
  "
8
  sizes="(max-width: 768px) 100vw, 800px"
9
  alt="响应式图片"
10
/>

其中：

• srcset：提供可供选择的图片及其实际宽度。
• sizes：告诉浏览器图片预计显示多宽。

浏览器会结合显示尺寸、DPR 等条件选择资源，而不需要通过 JavaScript 手动切换图片。

图片懒加载#

1
<img
2
  src="image.jpg"
3
  loading="lazy"
4
  width="800"
5
  height="450"
6
  alt="示例图片"
7
/>

loading="lazy" 表示推迟加载距离视口较远的图片，可以减少初始页面加载负担。

图片应尽量提供 width 和 height，为加载前的图片预留空间，减少布局偏移。首屏关键图片一般不要随意使用懒加载。

图片底部空白#

img 默认是行内替换元素，基线对齐可能导致图片底部出现空隙。

1
img {
2
  display: block;
3
}

通常可以直接解决。