宏碁安卓手机适配核心是正确设置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）渲染，导致文字极小、按钮点不中、布局错位。

• 必须在 中加入：

• 避免写死 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 文件。