移动端商品规格弹窗需兼顾交互友好性、视觉清晰度与多端适配：采用语义化dialog/aria-modal结构，fixed全屏遮罩+max-width限制，80vh高度滚动；圆角12px，44×44px关闭按钮；规格分层折叠展示，选项60×40px最小尺寸，已选高亮、禁用置灰提示；ios/android针对性修复fixed偏移与viewport；rem动态字体；禁用body滚动；css轻量动画；确认后禁用按钮并反馈状态。
在移动端商城中实现商品规格选择弹窗，核心是兼顾交互友好性、视觉清晰度和适配不同屏幕尺寸。不能简单套用PC弹窗逻辑，需针对触控操作、小屏空间和性能做针对性优化。
使用语义化、响应式弹窗结构
弹窗应基于dialog或div+aria-modal构建，确保可访问性；外层容器设为position: fixed并覆盖全屏，内部内容区域宽度设为max-width: 400px，左右margin: auto，避免在小屏上横向溢出。高度用max-height: 80vh配合overflow-y: auto，防止内容过长时无法滚动。
- 遮罩层背景用半透明黑（
rgba(0,0,0,0.6)），点击遮罩可关闭弹窗 - 弹窗圆角设为
12px，符合iOS/Android设计规范 - 关闭按钮放在右上角，尺寸不小于
44×44px（满足最小触控热区）
规格选项采用分层折叠+高亮反馈
多规格组合（如颜色+尺寸+版本）建议用垂直分组列表，每组标题固定，选项用flex wrap横向排列，单个选项宽高设为min-width: 60px; min-height: 40px，文字居中，支持文字/色块/图片图标混合展示。
- 已选规格加
border: 2px solid #ff6700和阴影，未选则仅保留浅灰边框 - 禁用不可选组合时，对应选项置灰+
cursor: not-allowed，并显示tooltip提示“该颜色暂无M码” - 点击后立即视觉反馈（如轻微缩放或背景色变化），避免用户重复点击
适配不同设备与系统特性
在iOS Safari中需处理position: fixed在键盘弹出时的偏移问题：监听focus事件，对输入类元素（如数量输入框）出现时，动态将弹窗transform: translateY(-100px)并加过渡；安卓WebView则注意viewport设置为width=device-width, initial-scale=1, maximum-scale=1，禁用双击缩放。
- 字体大小统一用
rem，根字号按屏幕宽度动态设置（如document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px'） - 关键按钮（确认、加入购物车）使用
pointer-events: auto并设z-index: 1001，避免被系统UI遮挡 - 弹窗打开时禁用body滚动（
document.body.style.overflow = 'hidden'），关闭后恢复
轻量交互与性能保障
避免使用复杂动画库，用CSS transition实现淡入+缩放（opacity 0.2s, transform 0.2s），入场动画延迟不超过300ms。规格数据建议预加载或按需懒加载，弹窗内不嵌iframe或第三方SDK。
- 点击确认后立即禁用按钮，显示加载态（如文字变“提交中…”+旋转图标）
- 网络失败时给出明确提示（如“库存校验失败，请重试”），并保持弹窗不自动关闭
- 内存敏感场景下，关闭弹窗后清空内部表单状态，释放DOM引用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
