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 容易触发桌面布局回退。
推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
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。
立即学习“前端免费学习笔记（深入）”；
实操建议：
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
- 用
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 事件中提示操作路径。
