小辣椒手机需降级适配: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 解析异常。不加约束会导致页面横向滚动或字体炸裂。
-
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 或静态图
小辣椒内置播放器对 的 mp4/h264 解码能力极弱,常见报错:ERROR_CODE_DECODE_FAILED; 则常静音或卡死。原生标签基本不可用。
立即学习“前端免费学习笔记(深入)”;
- 优先转为
(需提前编译好 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 包裹——这些不是优化项,是保活底线。











