移动端轮播容器必须正确设置viewport且禁用缩放，标准写法为；错误写法会导致显示过小、横向滚动、切换卡顿。
移动端轮播容器必须设 viewport 且禁用缩放
不加或写错 <meta name="viewport">，轮播在 iOS Safari 和安卓 WebView 里会显示过小、横向滚动、切换卡顿——这不是 CSS 能修的。标准写法只用这一行：<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">。
常见错误包括：width=1024 这类固定值、漏掉 initial-scale=1、把 user-scalable=yes 留给用户乱缩放导致布局崩塌。如果业务真需要缩放（如地图页），最多放开 minimum-scale=0.5 和 maximum-scale=2.0，但要实测 iOS Safari 的 pinch-zoom 是否卡顿。
图片尺寸和宽高比必须显式声明
移动端轮播最常抖动、跳动、FOUC（内容闪现），根源是浏览器等图片加载完才确定尺寸，触发重排。所有 <img alt="移动端HTML怎么布局轮播展示区" > 必须带 width 和 height 属性（哪怕只是占位值），再配合 aspect-ratio: 16/9 或内联 style="max-width:90%" 控制比例。
不要依赖 CSS 的 max-width: 100% 或 height: auto —— 它们无法阻止重排。更稳妥的是用 <picture></picture> + srcset 提前告知浏览器资源优先级，懒加载也更容易控制。
立即学习“前端免费学习笔记（深入）”；
<img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="产品主图">- 若用 Swiper，确保每个
.swiper-slide内部<img alt="移动端HTML怎么布局轮播展示区" >都有宽高，否则滑动时高度塌陷 - 避免用
background-image实现轮播图——它无法被预加载，也不支持loading="lazy"
Flex 布局下 swiper-slide 必须加 min-width: 0
移动端 Flex 容器中，.swiper-slide 默认继承父级 min-width: auto，在窄屏下可能被压缩变形，导致图片拉伸或文字换行错位。必须显式设 min-width: 0。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
Swiper 本身不自动加这个样式，得自己补：
.swiper-slide {
min-width: 0;
}
同理，所有 flex 子项（比如轮播指示器的 .swiper-pagination-bullet）都建议加 min-width: 0，否则在某些安卓 WebView 下会意外撑宽容器。
触摸交互必须检查 touch-action 和 scroll-snap 兼容性
原生 CSS scroll-snap-type 在 Chrome 120+ 支持平滑轮播，但 Safari 15.6 以下不支持 scroll-snap-stop: always，iOS 16.4 之前还存在拖拽后自动回弹不准的问题。别指望纯 CSS 实现“精准停靠”。
真正要稳定支持触屏拖拽、惯性滑动、松手自动对齐，还是得用 Swiper。但注意两点：
- Swiper 初始化时必须确认
touchRatio: 1和touchAngle: 45，否则斜向滑动容易误判为页面滚动 - 禁止给轮播容器设
touch-action: pan-y（除非你确定只允许上下滚动），否则会禁用左右滑动手势 - 如果用了自定义箭头按钮，确保它们有
role="button"和tabindex="0"，否则 iOS VoiceOver 无法聚焦
移动端轮播最难调的不是动画，而是手势边界：用户想滑轮播，却触发了页面整体滚动；或者想滚动页面，却被轮播劫持了 touchstart。这类问题往往藏在 touch-action 和事件冒泡链里，得用开发者工具的 “Rendering > Paint flashing” 和 “Sensors > Touch simulation” 反复验证。
