飞利浦手机已无在售机型，所谓适配实为兼容Android 4.0.4及以下老旧WebView环境：需用固定viewport、JS动态rem、float布局、规避现代API，并以320px基准压测。

飞利浦手机不是主流移动终端，目前市面上已无在售的飞利浦品牌智能手机（其手机业务已于2014年终止，后续少量贴牌机型也早已退市），因此不存在需要专门适配“飞利浦手机”的HTML5开发场景。所谓“适配飞利浦手机”，本质是误将老旧设备、低性能安卓功能机或非标准WebView当作独立平台来处理——真正该做的是兼容低端Android WebView + 低DPR + 小屏幕 + 无现代API支持的环境。

viewport 设置必须保守且显式

很多飞利浦老机型（如2012–2014年间的Android 2.3/4.0设备）使用的是老旧WebKit内核，对 width=device-width 解析不稳定，甚至忽略 initial-scale。盲目套用现代写法会导致页面被缩放成PC视图或横向溢出。

• 用固定宽度+强制缩放更可靠：

• 避免 device-width —— 老机型常返回错误值（比如返回 800 而非真实屏幕宽度）
• 禁用双击缩放和手势缩放，防止用户误操作导致布局错乱

rem 适配需降级为 JS 动态计算 + 固定基准

现代 rem 方案依赖 document.documentElement.style.fontSize 或 CSS 自定义属性，但飞利浦老机型不支持 getComputedStyle 正确读取根字体，也不支持 rem 在某些CSS属性（如 border-radius）中生效。

• 改用纯 JS 控制：

  function setRootFontSize() {
    const baseWidth = 320; // 按设计稿320px基准
    const width = window.innerWidth || document.body.clientWidth;
    const size = (width / baseWidth) * 100; // 1rem = 100px 对应 320px 设计稿
    document.documentElement.style.fontSize = size + 'px';
  }
  setRootFontSize();
  window.addEventListener('resize', setRootFontSize);

• 所有样式中只用 rem，不用 vw/vh（Android 4.3以下不支持）
• 避免在 @media 中嵌套 rem 计算，老WebKit解析易出错

必须规避现代API与CSS特性

飞利浦老机型的WebView基本等同于 Android 4.0.4 的原生浏览器，不支持 Flexbox、Grid、transform、will-change、localStorage（部分机型有bug）、touchstart 事件冒泡异常等。

立即学习“前端免费学习笔记（深入）”；

• 布局改用 float + margin 或 display: table-cell（兼容性远高于Flex）
• 触摸交互必须同时监听 touchstart 和 click，并加 300ms delay 兼容（不能依赖 fastclick，它在老WebView里会失效）
• 检测关键能力再启用功能：

  if ('localStorage' in window && window.localStorage !== null) {
    // 才用 localStorage
  } else {
    // 退回到 cookie 或 URL 参数模拟存储
  }

• 图片必须带 width 和 height 属性，否则老WebView会重排严重卡顿

真正的难点不在“飞利浦”这个品牌，而在面对一个没有明确UA标识、无远程调试能力、连 console.log 都可能报错的封闭环境时，如何用最原始但确定的方式守住底线：能显示、不崩溃、可点击、文字可读。与其花时间查“飞利浦UA字符串”，不如把 Android 4.0.4 + WebView + DPR=1 当作最小目标真机环境来压测。