移动端座位图需确保可读、可点、不溢出、状态清晰、操作可靠，须统一设计dom结构（含data-row/data-col）、缩放（transform: scale()）、防误触（节流+pointerevents锁定）及连座校验（前后端双重验证）。
移动端票务页中展示座位图并支持选座，核心不是“适配屏幕尺寸”本身，而是让座位图在小屏上可读、可点、不溢出、状态清晰、操作可靠。单纯用 media query 或 viewport 缩放远远不够，必须结合 DOM 结构、事件控制和渲染逻辑统一设计。
座位图 DOM 必须带 data-row 和 data-col 属性
每个座位 <div> 不能靠 class 名（如 <code>seat-3-5）推断位置，而要显式写：
<div class="seat" data-row="3" data-col="5" data-status="available"></div>
行号从 1 开始，符合用户认知（第3排第5座），也方便后续连座校验。禁用 id="seat-3-5"——ID 易冲突、难批量操作，用 querySelectorAll('[data-row][data-col]') 才稳定。
缩放用 transform: scale()，别碰 width/height
直接改座位宽高会导致热区偏移、文字挤压、高 DPI 下模糊。正确做法是：
- 把整个座位容器（如
.seat-map）设为transform: scale(0.75)； - 配合
transform-origin: top left锚定缩放起点； - 内部所有尺寸（字体、边距、圆角）保持原始 px 值，比例关系不变。
单个座位元素禁止加 scale——父子叠加会彻底打乱点击坐标。
点击交互必须防误触与状态错位
移动端点击比 PC 更易连点、误触右键或触发长按菜单：
- 绑定 click 时内部加节流：记录上次操作时间戳，300ms 内忽略重复；
- 显式判断
event.button === 0，只响应左键； - 点击后立即设
element.style.pointerEvents = 'none'并加 loading 状态，视觉+逻辑双重锁定； - 状态变更统一走
data-status（如"selected"/"occupied"），样式通过[data-status="selected"] { background: #4CAF50; }控制，避免 class 切换不同步。
连座与数量限制必须前后端双重校验
前端禁用超量座位只是提示，用户可绕过：
- 前端检查：所选座位是否同排（
data-row全相同）、列号是否连续整数（如[7,8,9]✅，[7,9,10]❌）； - 后端必须复核物理布局——某影厅第 12 排 11–13 号实际被过道隔开，数据库中标记为不可连售；
- 最大可选数（如限 4 张）前后端一致：前端灰掉第 5 个起的可选座，后端收到 5 个 seat ID 直接返回
400 Bad Request。
不复杂但容易忽略
