必须设置完整 viewport 并动态设置 rem 根字体、监听 touchstart 替代 click、图片容器设 max-width:100% 且禁用固定高度。一加新机型屏幕逻辑宽度 375px/414px、dpr=3，仅 width=device-width 会导致文字过小；需补 minimum-scale、maximum-scale、user-scalable=no，并在 input 聚焦时动态放开缩放；用 JS 按 clientWidth 动态设 html font-size 实现等比缩放，避免媒体查询硬编码和 vw；所有点击区域绑定 touchstart 并节流防连点；用 aspect-ratio 实现等比占位，兼容智能分辨率动态变化。
viewport 设置必须加，且不能只写 width=device-width
一加 Ace 6 / Ace 6T 等新机型屏幕宽度普遍为 375px（逻辑像素）、414px（如 Ace 6T 部分高配版），物理像素密度高（-webkit-min-device-pixel-ratio: 3），仅靠默认 会导致文字过小、按钮难点击、布局挤压。必须补全缩放控制：
特别注意：user-scalable=no 能避免 iOS/Android 浏览器 双击放大导致的布局错乱；但若页面含表单输入框，需测试软键盘弹出是否触发意外缩放——一加 OxygenOS 和 ColorOS 的 WebView 对该属性处理略有差异，建议在 input 聚焦时临时放开缩放（用 JS 动态修改 content 属性）。
CSS 布局优先用 rem + 动态根字体，别依赖媒体查询硬 编码
一加手机型号多（Ace 6、Ace 6T、Turbo 6、13T 等），屏幕宽度从 360px 到 432px 不等，用媒体查询逐个写断点（如 @media (min-width: 375px)）维护成本高、易漏。更稳的方式是用 JS 动态设置 html 的 font-size，让所有 rem 值自动适配：
function setRootFontSize() { const width = document.documentElement.clientWidth; // 以 375px 为基准，1rem = 100px → 100 / 375 * width document.documentElement.style.fontSize = (100 / 375 * width) + 'px'; } setRootFontSize(); window.addEventListener('resize', setRootFontSize);这样设计稿上 32px 字体直接写 0.32rem，按钮宽 160px 写 1.6rem，一加各机型都能等比缩放。切记：不要用 vw 替代，一加部分旧版 WebView 对 100vw 渲染异常（尤其横屏切换后）。
立即学习 “ 前端免费学习笔记（深入）”；
触控交互必须监听 touchstart，禁用 click 延迟
一加手机默认启用 300ms 点击延迟（为兼容双击缩放），纯用 click 事件会明 显卡 顿。所有可点击区域（按钮、卡片、菜单项）必须同时绑定 touchstart，并阻止默认行为：
const btn = document.getElementById('submit-btn'); btn.addEventListener('touchstart', function(e) {e.preventDefault(); // 关键：禁用 300ms 延迟 handleAction();}); // 兜底兼容 PC 端 btn.addEventListener('click', handleAction);注意：touchstart 在一加 ColorOS 14+ 上可能触发多次（尤其快速连点），建议加简单节流（如 200ms 内忽略重复触发）；另外，避免在 touchstart 中做重渲染，否则在 Ace 6T 骁龙 8 Gen5 上也可能出现微卡顿。
图片和容器必须设 max-width: 100%，且禁止固定 height
一加手机屏幕比例多样（Ace 6 是 20:9，13T 是 19.5:9），固定高度的 div 极易被拉伸或裁剪。必须强制响应式：
img, .video-placeholder, .card-image {max-width: 100%; height: auto; display: block;}如果需要等比占位（如海报图），用 aspect-ratio（一加 Ace 6+ 全系支持）而非 padding-top 百分比黑魔法：
.aspect-box {aspect-ratio: 16 / 9; width: 100%;}不支持 aspect-ratio 的老机型（如 Ace 6 初期固件）会回退为自然高度，不影响功能，只是视觉略松散——比强行固定高度强得多。
最常被忽略的一点：一加手机默认开启「智能分辨率调节」，实际渲染宽度可能随亮度 / 场景动态变化（比如 Ace 6T 在游戏模式下会锁定 1080p 渲染）。所以 clientWidth 获取值不是静态的，动态设置 font-size 的逻辑必须在 resize 和 orientationchange 两个事件里都触发。
