ZTE机型适配需动态设置viewport、校验rem基准、同时监听touch/pointer事件、显式处理dpr及禁用passive；单一方案无效，必须联动UA解析、dpr监听与viewport重写。
viewport 设置必须精准匹配 ZTE 机型的物理 viewport 宽度
ZTE 手机（如 Blade A系列、Axon 系列）多数采用非标准 DPI 或定制 Android WebView，width=device-width 在部分旧机型（如 Blade V5，Android 4.4 + WebView 30）下会误读为 320px，导致内容横向压缩或字体异常。不能只依赖默认值。
- 优先用
—— 关闭缩放可规避 ZTE 自带浏览器对双击缩放的错误响应 - 对 ZTE Blade A7（2020，分辨率为 720×1600，device-width=360）等机型，建议补充 JS 动态修正：
if (navigator.userAgent.indexOf('ZTE') > -1) { const meta = document.querySelector('meta[name="viewport"]'); meta && (meta.content = 'width=360, initial-scale=1.0'); } - 避免使用
width=320这类“一刀切”写法——ZTE Axon 7 屏宽是 384px（@2x），硬设 320 会导致右侧留白或文字挤出
REM 布局需绕过 ZTE 系统浏览器的 font-size 重置 Bug
ZTE 部分定制系统（如基于 Android 5.1 的 Nubia UI 衍生版）会在页面加载后主动将 的 font-size 重置为 16px，导致你用 JS 动态设置的 rem 基准失效，所有尺寸瞬间“缩水”。
- 不要只靠
document.documentElement.style.fontSize一次性设置；改用setTimeout+getComputedStyle双重校验：function setRem() { const base = 375 / 10; // 375 设计稿等比缩放 const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize); if (Math.abs(fontSize - base) > 1) { document.documentElement.style.fontSize = base + 'px'; } } setRem(); window.addEventListener('resize', setRem); - 慎用
lib-flexible：它在 ZTE Blade V7（MTK 平台）上与系统 WebView 的 touch 事件队列冲突，易引发点击延迟 - 推荐改用
postcss-pxtorem+viewport插件编译时转换，从源头规避运行时干扰
触控与事件必须同时监听 touch 和 pointer
ZTE 多数中低端机型（如 Blade L5 Plus）搭载老旧内核 WebView（Chromium 37–45），不支持 pointerdown，但部分新机型（Axon 30 Ultra）又已弃用 touchstart。单写一种会直接失灵。
- 统一用
addEventListener注册两个事件，并用event.cancelable或event.pointerType判断来源：el.addEventListener('touchstart', handler, { passive: false }); el.addEventListener('pointerdown', handler, { passive: false });function handler(e) { if (e.type === 'pointerdown' && e.pointerType !== 'touch') return; e.preventDefault(); // 实际逻辑 }
- 禁用
passive: true—— ZTE 系统浏览器对 passive 滚动优化支持极差，开启后preventDefault()无效，下拉刷新/手势滑动直接卡死 - 避免用
click做主交互：ZTE 机型 click 有 300ms 延迟且常被系统劫持（如误触发“网页翻译”浮层）
高清图与 1px 边框要手动适配 devicePixelRatio
ZTE 机型的 window.devicePixelRatio 报告不稳定：Blade A50（2022）在横屏时返回 2.5，但实际渲染只认 2x；Axon 11 的 DPR 在深色模式下会突变为 3.0 导致图片模糊。
立即学习“前端免费学习笔记（深入）”；
- 图片 srcset 必须显式声明 DPR 对应资源：
@@##@@
- 1px 边框别依赖伪元素 transform 缩放——ZTE WebView 的
scaleY(0.5)在某些固件下渲染为 0.7px，出现虚边。改用box-shadow: 0 0 0 1px #ccc更稳 - 检测 DPR 后立即重绘关键样式，避免 onload 后才执行造成闪动：
const dpr = window.devicePixelRatio || 1; document.documentElement.setAttribute('data-dpr', dpr);，再用 CSS[data-dpr="2"] .border { border-width: 0.5px; }
ZTE 机型碎片化严重，没有“一套配置打天下”的方案；真正有效的适配，是把 userAgent 字符串解析、devicePixelRatio 监听、viewport 动态重写三者联动起来，缺一不可。
