HTML5在索尼Xperia手机上无需专属适配，但需严格设置viewport（含initial-scale=1.0）、用screen.width动态计算rem基准、双绑touchstart与click事件并preventDefault，且真机覆盖新旧机型测试。
HTML5 在索尼手机（如 Xperia 系列）上无需特殊“索尼专属适配”，它和其他安卓旗舰设备一样，使用标准 Chromium 内核的浏览器（Chrome、Edge 或 Sony 自带浏览器），支持完整的 HTML5 特性。真正需要做的，是遵循通用移动端适配原则——但索尼设备有几个典型特征容易被忽略：高刷新率（120Hz）、高分辨率（如 1200×2640）、宽屏比例（20:9+）、以及部分型号默认启用“智能缩放”或“字体放大”系统级设置。
viewport 必须设对，否则索尼浏览器会强制缩放
索尼 Xperia 设备（尤其 Android 12+ 后）对 viewport 解析更严格。只写 不够，浏览器可能仍按桌面模式渲染，导致文字模糊、按钮错位。
- 必须显式加上
initial-scale=1.0，否则部分 Xperia 型号（如 XQ-BC52）会默认放大 1.25x - 避免使用
user-scalable=no—— 索尼系统设置中若开启了「大字体」或「无障碍放大」，该属性会直接禁用系统级缩放，导致页面不可读 - 推荐完整写法：
字体与布局用 rem + 动态根字号，别信 devicePixelRatio
索尼手机普遍存在「逻辑像素 ≠ 物理像素」且缩放策略复杂的问题（例如 Xperia 1 IV 在「标准」显示模式下 window.devicePixelRatio === 2.75，但开启「清晰显示」后变成 3.0）。硬编码 px 或依赖 dpr 计算 rem 基准，会导致文字忽大忽小、按钮挤压。
- 用
screen.width（屏幕逻辑宽度，单位 px）而非innerWidth或clientWidth计算根字号，更稳定 - 设计稿为 750px 宽时，推荐脚本：
const WIDTH = 750; function setRootFontSize() { document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px'; } setRootFontSize(); window.addEventListener('resize', setRootFontSize); window.addEventListener('orientationchange', setRootFontSize); - 慎用
vw单位：Xperia 部分浏览器在横屏切换瞬间会错误计算100vw，造成短暂横向滚动条
触摸事件要同时监听 touchstart 和 click，别只绑 click
索尼浏览器（特别是旧版 Sony Browser 或 Android WebView 89–103）存在 touch/click 事件延迟或丢失问题。仅绑定 click 会导致按钮无响应；只绑 touchstart 又会在 PC 模拟器或折叠屏双屏模式下失效。
立即学习“前端免费学习笔记（深入）”；
- 必须双注册，且用
preventDefault()阻止默认行为（防止 300ms 延迟）：const btn = document.getElementById('submit'); btn.addEventListener('touchstart', handleAction, { passive: false }); btn.addEventListener('click', handleAction);function handleAction(e) { e.preventDefault(); // 关键：阻止默认 click 行为 // 执行业务逻辑 }
- 避免在
touchstart中直接alert()或弹窗，Xperia 系统会拦截并报错DOMException: The request is not allowed by the user agent or the platform
真正卡住开发者的，往往不是索尼独有的 bug，而是它把通用兼容性问题放大了：比如系统字体缩放影响 rem 计算、高 DPR 下 canvas 渲染模糊、WebView 版本碎片化导致 localStorage 在私密模式下静默失败。建议真机测试至少覆盖 Xperia 1 IV（Android 14）、Xperia 10 V（Android 14）和一台旧款（如 Xperia XZ2 Compact，Android 9）——差异比你想象中更大。
