便携式掌上设备（如教育平板、低配Android平板、Chromebook）内存通常 ≤2GB、CPU单核主频 ≤1.2GHz、无独立GPU，直接套用桌面端 HTML 工具链大概率卡死或功能失效。必须从浏览器兼容性、语法降级、事件机制、资源加载四方面做硬性裁剪。先测浏览器内核是否撑得住 HTML5 函数很多教育平板预装定制浏览器，连 localStorage 或 fetch() 都不支持，强行写代码等于白忙。别跳过这步：打开设备浏览器，访问 https://html5test.com重点看 “JavaScript” 和 “DOM APIs” 两项得分 —— 均需 ≥350 才能稳定运行基础 HTML 函数（如 document.getElementById、addEventListener('touchstart')）若任一低于 350，立刻换 Kiwi Browser（Chromium 内核，支持 ES2022）并用 file:/// 协议加载本地 HTML禁用所有现代语法，只用 ES5 + 原生 DOM APIES6+ 的 const、箭头函数、Promise 在旧内核里会直接报 SyntaxError，不是警告，是整页崩溃：把 const myBtn = document.getElementById('submit'); 改成 var myBtn = document.getElementById('submit');所有 fetch() 替换为 XMLHttpRequest，且必须手动处理 onreadystatechange
便携式掌上设备（如教育平板、低配Android平板、Chromebook）内存通常 ≤2GB、CPU单核主频 ≤1.2GHz、无独立GPU，直接套用桌面端 HTML 工具链大概率卡死或功能失效。必须从浏览器兼容性、语法降级、事件机制、资源加载四方面做硬性裁剪。
先测浏览器内核是否撑得住 HTML5 函数
很多教育平板预装定制浏览器，连 localStorage 或 fetch() 都不支持，强行写代码等于白忙。别跳过这步：
- 打开设备浏览器，访问
https://html5test.com - 重点看 “JavaScript” 和 “DOM APIs” 两项得分 —— 均需 ≥350 才能稳定运行基础 HTML 函数（如
document.getElementById、addEventListener('touchstart')） - 若任一低于 350，立刻换 Kiwi Browser（Chromium 内核，支持 ES2022）并用
file:///协议加载本地 HTML
禁用所有现代语法，只用 ES5 + 原生 DOM API
ES6+ 的 const、箭头函数、Promise 在旧内核里会直接报 SyntaxError，不是警告，是整页崩溃：
- 把
const myBtn = document.getElementById('submit');改成var myBtn = document.getElementById('submit'); - 所有
fetch()替换为XMLHttpRequest，且必须手动处理onreadystatechange状态 - 避免
classList，改用className字符串拼接（el.className += ' active'） - 用
document.write动态插入脚本时，必须加defer属性，否则在部分教育平板上会阻塞渲染
触摸事件必须显式声明 passive: false
掌上设备默认启用 300ms 点击延迟，且新版 Chromium 对 touchstart 强制启用 passive 模式 —— 不声明 {passive: false}，event.preventDefault() 就无效，滚动拦截、手势识别全废：
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
el.addEventListener('touchstart', handler, {passive: false}); - 错误写法：
el.addEventListener('touchstart', handler);（在 Android 12+ 上静默失效） - 所有涉及滑动、拖拽、缩放的交互，都得在
touchmove里调event.preventDefault()，否则系统滚动会抢事件
图像与样式必须离线化，禁用任何网络请求
教育平板常禁用后台联网、DNS 被劫持、HTTPS 证书不被信任 —— 任何 <img src="https://..."/> 或 @import url(...) 都可能触发白屏或控制台报错：
- 图片全部转为 base64 内联：
<img src="data:image/png;base64,iVBORw..."> - CSS 和 JS 全部内联进
<style>和<script>标签，删掉所有link和script[src] - 禁用
srcset和picture，它们依赖matchMedia，在低分屏设备上常返回undefined -
viewportmeta 必须写死：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
最易被忽略的是 CSP（Content Security Policy）策略 —— 很多教育平板系统浏览器默认启用严格 CSP，连 data: 协议图片都可能被拦。上线前务必在 Kiwi Browser 的 DevTools Console 中执行 console.log(document.querySelector('meta[http-equiv="Content-Security-Policy"]')) 查看是否已注入拦截规则。
