Fairphone手机因采用标准Android系统及Chromium内核，HTML5兼容性良好，但需针对性优化viewport设置、避免WebKit私有属性、谨慎使用Web Workers，并严格满足PWA安装条件。

HTML5 在 Fairphone 手机上基本无需特殊适配——Fairphone 使用标准 Android 系统（如 Fairphone 4 运行 Android 13），其 WebView 和 Chrome 浏览器均基于 Chromium，对 HTML5 标准支持良好。真正需要关注的不是“能不能跑”，而是“是否在小屏、低内存、旧版系统或定制 ROM 下表现稳定”。

viewport 设置必须显式声明

Fairphone 多数机型（如 FP3/FP4）屏幕宽度为 393–412px（CSS px），但部分用户可能启用了系统级字体缩放或强制高对比度模式，导致视口计算异常。不设 viewport 或仅写 width=device-width 容易触发桌面布局回退。

推荐写法：

• initial-scale=1.0 防止 Android WebView 自动缩放（尤其在 Android 10–12 的某些 OEM 补丁中存在 bug）
• 避免使用 shrink-to-fit=yes（Safari 专属，Android 忽略且可能引发解析警告）
• 若需支持用户缩放，请移除 user-scalable=no，但务必测试文字可读性——Fairphone 用户中视障群体比例高于行业平均

避免依赖 WebKit-only CSS 属性

Fairphone 默认浏览器是 Chrome（Chromium 内核），但部分用户会安装 Firefox for Android 或 GrapheneOS 自带的 Vanadium 浏览器。这些环境不支持 -webkit- 前缀的实验性属性，比如 -webkit-backdrop-filter 或 -webkit-overflow-scrolling: touch。

实操建议：

• 用 backdrop-filter 替代 -webkit-backdrop-filter，并提供 background-color: rgba(255,255,255,0.8) 降级
• 禁用 -webkit-overflow-scrolling：它在 Android 12+ 上已被废弃，启用后反而导致滚动卡顿或触摸事件丢失
• 检测是否为 Chromium 内核可查 navigator.userAgent.includes('Chrome') || navigator.userAgent.includes('Edg') ，但不建议据此加载不同样式——应以特性检测为准（如 'backdropFilter' in document.body.style）

谨慎使用 Web Workers 和大量 DOM 操作

Fairphone 3/4 的 SoC 是高通骁龙 632 / 690，GPU 性能有限，且部分设备出厂内存仅 4GB（实际可用约 2GB）。在后台标签页较多时，Chrome 可能主动冻结或终止 Web Worker。

常见问题现象：

• 定时器（setInterval）在后台页面中延迟严重甚至暂停
• fetch() 请求在 Worker 中超时，但主线程无报错
• 频繁 innerHTML 更新导致 FPS 掉到 15 以下（尤其在 position: fixed 元素内）

优化方向：

• 用 requestIdleCallback() 替代密集循环 DOM 操作
• Worker 中避免 console.log（Android WebView 下日志序列化开销显著）
• 监听 document.visibilityState，在 visibilityState === 'hidden' 时暂停非关键任务

离线缓存与 PWA 安装需验证 installability

Fairphone 用户更倾向长期使用设备，PWA 是提升留存的关键。但 Android 对 PWA 安装的判定比 Chrome Desktop 更严格：必须满足 manifest.json 含 icons（至少一个 192×192 和一个 512×512）、start_url 可访问、HTTPS 有效，且首次访问时不能跳转到登录页。

调试方法：

• 在 Chrome for Android 地址栏输入 chrome://inspect，远程调试 Fairphone 页面
• 运行 chrome.runtime.getManifest() 验证 manifest 加载；若返回 undefined，说明路径错误或 MIME 类型未设为 application/manifest+json
• 检查 ServiceWorkerRegistration.active 是否存在，否则 navigator.serviceWorker.ready 会永远 pending

特别注意：Fairphone OS（基于 AOSP）默认禁用第三方应用安装来源，用户需手动开启「未知来源」才能完成 PWA 添加到主屏幕——这点无法前端绕过，但可在 beforeinstallprompt 事件中提示操作路径。