小辣椒手机需降级适配：viewport须设width=320并禁缩放；禁用flex/Grid，改用-webkit-box或float；音视频需Flash或intent fallback；JS须防抖、拆帧、try-catch。
小辣椒手机基本已退出主流市场，其搭载的 Android 系统多为 4.0–4.4（甚至更低），内核普遍为老旧 WebKit 或定制 Chromium 30–37，HTML5 特性支持残缺，**不能靠“写标准 HTML5 就能自动适配”**。真正有效的适配，是降级、兜底、手动补丁三者结合。
viewport 设置必须显式锁定缩放与宽度
小辣椒多数机型无视 width=device-width 的默认行为，或对 initial-scale 解析异常。不加约束会导致页面横向滚动或字体炸裂。
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
width=320比device-width更可靠——小辣椒识别device-width常返回错误值（如 640 或 800） - 必须同时设
maximum-scale=1.0和user-scalable=no，否则部分机型双击会意外放大 - 若需适配多种小辣椒型号（如 L1/L2/L3），建议 JS 动态检测
window.screen.width后注入对应viewport
flexbox 和 CSS Grid 必须禁用或降级为 float
Android 4.4 以下的 WebView 几乎不支持 display: flex，即使加了 -webkit- 前缀也仅部分属性生效（如 flex-direction 可用，align-items 常失效）。直接使用会导致布局完全错乱。
- 用
display: -webkit-box替代flex（仅限简单单行布局） - 复杂结构一律回退到
float+clear，配合box-sizing: border-box控制宽度 - 绝对禁止使用
grid-template-areas或gap，这些在 Chromium 37 中无任何前缀支持 - 可用 Modernizr 检测
flexbox支持，但更轻量的做法是 UA 字符串匹配：navigator.userAgent.indexOf('XiaoLaJiao') !== -1
audio/video 标签需手动 fallback 到 Flash 或静态图
小辣椒内置播放器对 <video> 的 mp4/h264 解码能力极弱，常见报错：ERROR_CODE_DECODE_FAILED；<audio> 则常静音或卡死。原生标签基本不可用。
立即学习“前端免费学习笔记（深入）”；
- 优先转为
<embed src="xxx.swf">（需提前编译好 AS3 播放器，兼容 Android 4.0+ Flash Player 11.1） - 若无法嵌 Flash，则用图片 + 文字提示：“点击播放” → 触发
window.location.href = 'intent://...'调用系统播放器（需适配 intent 协议格式） - 务必监听
error事件并降级：video.addEventListener('error', () => { video.parentNode.replaceChild(document.createElement('img'), video); });
小辣椒设备的 DOM 渲染延迟高、JS 执行慢、内存极易溢出，所有动画必须用 setTimeout 拆帧，所有事件绑定要防抖，所有 JSON.parse 需 try-catch 包裹——这些不是优化项，是保活底线。
