宏碁安卓手机适配核心是正确设置viewport、用min-width/max-width媒体查询、rem动态根字体、touchstart+click事件组合、HTTP本地调试。需避免width=320、device-width、user-select:none在表单上及file://协议调试。
viewport 设置是第一道门槛
宏碁（Acer）安卓手机本身没有特殊限制，但多数型号使用中低端联发科或高通芯片，搭配旧版 Android（如 8.0–10.0）和系统浏览器（如 Acer Browser 或旧版 Chrome），对 HTML5 的兼容性依赖 viewport 是否正确声明。不加或写错 viewport，页面会默认以桌面宽度（通常 980px）渲染，导致文字极小、按钮点不中、布局错位。
- 必须在
中加入：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- 避免写死
width=320或maximum-scale=1.3—— 宏碁部分机型（如 Liquid Z630）屏幕宽为 360px，硬设 320 会导致横向留白或强制缩放失真 - 若需适配低 DPI 屏幕（如 Liquid Jet 系列的 480×800），建议补充
target-densitydpi=medium-dpi（仅 Android WebView 有效，现代 Chrome 已弃用，但老系统浏览器仍依赖）
CSS 媒体查询要覆盖常见 Acer 分辨率
宏碁安卓机分辨率较杂：Liquid Z 系列多为 480×854 / 720×1280，Swift 系列有 540×960，部分新机用 720×1440。只写 @media (max-width: 600px) 不够，容易漏掉 720px 宽设备的横屏状态或高 DPR 下的像素密度判断。
- 优先用
min-width+max-width组合，而非device-width（已被 Chrome 80+ 限制，且宏碁系统浏览器识别不稳定）：@media (min-width: 480px) and (max-width: 767px) { /* 覆盖 480x854、540x960、720x1280 竖屏 */ } - 对字体/间距等基础样式，用
rem+ 动态根字体计算更稳妥（宏碁旧机型对vw支持差）：document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px'; // 以 375px 为基准
- 避免用
-webkit-min-device-pixel-ratio: 3匹配 “Acer Iconia” 平板 —— 它们实际是 2x，误判会导致样式加载失败
触控事件不能只绑 click
宏碁多数机型运行 Android 9 及以下，WebView 内核老旧（如 Chromium 69），click 有 300ms 延迟，且在快速双击、滑动中易被吞掉。单纯加 touchstart 又可能引发误触发（比如滚动时点到按钮）。
- 推荐用「轻量级防抖 + click fallback」组合：
const btn = document.getElementById('submit'); btn.addEventListener('touchstart', e => { e.preventDefault(); // 阻止默认滚动干扰 handleAction(); }, { passive: false }); btn.addEventListener('click', handleAction); // 兜底给不支持 touch 的环境 - 禁用
user-select: none在表单控件上 —— 宏碁键盘弹出时，部分机型会因该样式导致光标无法定位 - Canvas 类交互（如游戏、签名）务必监听
touchmove并调用e.preventDefault()，否则在 Liquid Flow 等带物理按键的机型上，触摸会触发系统返回键行为
本地调试时别信“直接点开 HTML 文件”
宏碁手机自带文件管理器打开 index.html 时，多数走的是系统 WebView（Android 7+ 后常为废弃内核），localStorage、fetch、甚至 canvas.toDataURL() 都可能报错或静默失败 —— 这不是你代码问题，是权限和协议限制。
立即学习“前端免费学习笔记（深入）”；
- 开发阶段必须走 HTTP 协议：用 Python 启服务
python3 -m http.server 8000
，再在手机浏览器访问http://192.168.x.x:8000/index.html - 若需离线验证，改用 Chrome for Android（从 Play Store 安装），它对 HTML5 API 支持远好于 Acer 自带浏览器；切勿依赖“Acer Browser”测试 PWA 或 Service Worker
- 遇到
SecurityError: Failed to read the 'localStorage' property，基本可判定是 file:// 协议导致 —— 没有绕过办法，只能换服务器方式
宏碁安卓机的适配难点不在硬件，而在碎片化的系统 WebView 和被厂商深度定制的浏览器内核。真正卡住人的，往往是 viewport 少一个参数、touchstart 忘了 preventDefault、或者调试时图省事点了桌面上的 HTML 文件。
