移动端双击放大不可靠，应改用单击+dialog全屏预览；缩略图需data-large存大图url，dialog内img设max-width/max-height/object-fit；safari 16.4+支持dialog，旧版需降级；hover缩放仅限桌面端，触摸设备可用data-touched反馈；须设aspect-ratio、srcset和inert防重排/模糊/误触。
双击放大在移动端根本不可靠
现代移动浏览器（Safari、Chrome）默认禁用双击缩放行为，尤其是当 <meta name="viewport"> 中含 user-scalable=no 时，touchstart + 时间间隔模拟的“双击”几乎必然失败：误触率高、延迟明显、干扰原生滑动，且 iOS Safari 对 touch 事件节流严格，连续两次 touchstart 很可能被合并或丢弃。
这不是代码写得不够好，而是平台策略层面的限制。强行硬上双击逻辑，最终只会让用户反复点两下、图片没反应、手指还划走了——体验比不放大还差。
用 click 替代双击，配合 dialog 实现真·响应式放大
单击触发全屏预览是当前最稳定、兼容性最好、也最符合用户直觉的方案。核心是用原生 <dialog></dialog> 承载大图，它自带模态、ESC 关闭、焦点管理，且语义清晰。
- 缩略图必须带
data-large属性存真实大图 URL（不是缩略图src），否则高清屏下会模糊 -
<dialog></dialog>内部的<img> 必须设 <code>max-width: 90vw; max-height: 90vh; object-fit: contain;，防止拉伸或溢出 - 调用
showModal()前，先赋值img.src并监听load事件，避免闪白或空图 - Safari 16.4+ 支持
<dialog></dialog>，旧版需降级为position: fixed+tabindex="-1"+ 手动focus()
transform: scale() 悬停放大只适用于桌面端
纯 CSS 的 :hover + transform: scale() 在桌面端简单有效，但对触摸设备完全无效——iOS/Android 不触发 :hover，且没有“悬停”概念。
如果坚持要视觉反馈，可加轻量级触摸态提示：
- 给图片加
ontouchstart="this.dataset.touched='1'" - CSS 中写
img[data-touched] { opacity: 0.9; transition: opacity 0.15s; }，提供即时触感反馈 - 不拦截
default行为，确保长按仍能唤出系统菜单（保存/分享）
真正影响体验的细节常被忽略
很多人花时间调 transition 动画曲线，却漏掉更关键的三件事：
- 缩略图没设
aspect-ratio或固定width/height，导致图片加载时页面重排、文字跳动 - 大图未用
srcset+sizes提供 2x/3x 资源，放大后在 Retina 屏上依然发虚 - 遮罩层没加
inert属性或手动禁用背景交互，点击弹窗外区域时，底层按钮仍可能被意外触发
这些不是“锦上添花”，而是决定用户会不会觉得“这网页卡”“点不准”“放大后糊”的实际分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
