必须设置完整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，并阻止默认行为：
模板采用响应式设计，自动适应手机，电脑及平板显示；满足单一店铺外卖需求。功能：1.菜单分类管理2.菜品管理：菜品增加，删除，修改3.订单管理4.友情链接管理5.数据库备份6.文章模块：如：促销活动，帮助中心7.单页模块：如：企业信息，关于我们更强大的功能在开发中……安装方法：上传到网站根目录，运行http://www.***.com/install 自动
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 两个事件里都触发。
