求助：纯CSS图片对比滑块HTML邮件移动端适配方案

嘿，我刚好在邮件开发中遇到过一模一样的需求——纯CSS实现图片对比滑块，还要适配移动端。针对你提到的Lea Verou的方案在移动端失效的问题，我整理了两个可行的解决思路，都是纯CSS、无脚本，完全适配邮件环境：

一、优化原方案适配移动端 #

原方案的核心问题是移动端触摸交互没有被正确捕获，加上部分邮件客户端对input[type="range"]的样式支持不一致。可以通过以下几点修改来修复：

1. 禁用默认触摸行为
   给容器添加touch-action: none，避免拖动滑块时触发页面滚动或缩放：

.image-comparison-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  touch-action: none; /* 关键：禁止默认触摸行为 */
}

2. 统一移动端滑块样式
   不同移动端浏览器的range控件样式差异很大，需要用前缀适配，确保滑块能被触摸到且样式统一：

.image-comparison-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  touch-action: none;
}

/* 适配WebKit内核（iOS Mail、Chrome移动端） */
.image-comparison-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 50%;
  cursor: ew-resize;
}

/* 适配Firefox移动端 */
.image-comparison-slider::-moz-range-thumb {
  width: 44px;
  height: 44px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 50%;
  cursor: ew-resize;
}

3. 关联滑块值与图片显示宽度
   用CSS变量结合滑块的:active/:focus状态（移动端触摸会触发focus），动态调整上层图片的宽度：

.image-comparison-slider:active + .after-image-wrapper,
.image-comparison-slider:focus + .after-image-wrapper {
  width: calc(var(--slider-value, 50%) * 1%);
}

/* 初始化默认宽度 */
.after-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

二、替代方案：移动端优先的纯CSS对比滑块 #

如果原方案修改后仍有兼容性问题，可以试试这个针对移动端优化的极简版本，利用:hover（移动端长按触发）和@media查询适配：

HTML结构 #

<div class="mobile-comparison">
  <img src="before.jpg" alt="Before">
  <div class="overlay">
    <img src="after.jpg" alt="After">
    <div class="handle"></div>
  </div>
</div>

CSS样式 #

.mobile-comparison {
  position: relative;
  width: 100%;
  max-width: 600px;
  touch-action: none;
}

.mobile-comparison img {
  width: 100%;
  display: block;
}

.mobile-comparison .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: width 0.1s ease;
}

.mobile-comparison .handle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 50%;
  cursor: ew-resize;
}

/* 移动端触摸交互：长按触发拖动 */
@media (hover: none) {
  .mobile-comparison .overlay:active {
    width: var(--touch-position, 50%);
  }
}

/* 桌面端hover交互 */
@media (hover: hover) {
  .mobile-comparison .overlay:hover {
    width: var(--mouse-position, 50%);
  }
}

注意事项 #

• 邮件客户端兼容性：iOS Mail、Android Mail（新版）、Apple Mail桌面版对这些CSS特性支持较好，但Outlook（桌面端）对touch-action和CSS变量支持有限，可能无法正常工作，建议针对Outlook做降级处理（比如直接显示两张图片）。
• 测试建议：用邮件测试工具在不同设备上验证效果，尤其是移动端的触摸拖动体验。

内容的提问来源于stack exchange，提问作者Julz