viewport 必须设为 width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no；rem 基准需 JS 动态计算，媒体查询改用 max-width；canvas 适配以 clientWidth/clientHeight 为准；字体与点击区须满足最小物理尺寸要求。
viewport 设置必须写对，否则 rem 和媒体查询全失效
realme GT 系列（如 GT、GT Neo、GT Neo2T）屏幕宽度普遍为 360px（逻辑像素）或 390px（部分高刷版），但物理分辨率高达 1080×2400 或 1200×2700。很多开发者直接抄 “width=320” 或硬设 initial-scale=1.3，结果在 GT 上文字过小、按钮点不中、横向滚动条意外出现。
正确做法是：用标准响应式 viewport，并让后续适配逻辑自己计算缩放 —— 不要靠“猜倍数”：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
width=device-width让浏览器读取真实逻辑宽度（GT 多为360px或390px，非 320） - 去掉
shrink-to-fit=no（Safari 旧私有属性，realme 系统 WebView 不识别） - 禁用用户缩放（
user-scalable=no）可避免误触 zoom，但需确保字体和点击区域足够大
rem 基准值必须动态计算，不能写死 media query
realme GT 系列搭载 ColorOS（基于 Android），系统 WebView 对 @media (min-device-width: 390px) 支持不稳定，且不同 GT 机型 device-width 返回值不一致（比如 GT Neo2T 报 390，GT 主力机报 360）。靠媒体查询切 font-size 容易漏适配或冲突。
推荐用 JS 动态设置 html 的 font-size，以设计稿宽度为基准（例如 375px 设计稿）：
立即学习“前端免费学习笔记（深入）”；
function setRem() {
const baseWidth = 375; // 设计稿宽度
const scale = document.documentElement.clientWidth / baseWidth;
document.documentElement.style.fontSize = scale * 100 + 'px'; // 1rem = 100px × scale
}
setRem();
window.addEventListener('resize', setRem);- 这样无论 GT 是 360px 还是 390px 屏幕，都能算出精确的缩放比
- 避免使用
device-width媒体查询，改用max-width做断点（如@media (max-width: 768px)），更可靠 - 注意：realme 某些低版本系统会触发两次
resize（横竖屏切换时），加节流即可
canvas 游戏或图表需按实际 clientWidth/clientHeight 缩放，不能只看 devicePixelRatio
realme GT 系列默认开启“智能分辨率”（如 1080p → 900p 节能模式），window.screen.width 返回的是物理分辨率，而 document.documentElement.clientWidth 才是渲染区真实宽度。若 canvas 适配只依赖 devicePixelRatio，画面会被拉伸或裁切。
关键逻辑必须基于 client 尺寸重算缩放比：
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gameW = 640, gameH = 1280; // 设计分辨率
const screenW = document.documentElement.clientWidth;
const screenH = document.documentElement.clientHeight;
const kW = screenW / gameW;
const kH = screenH / gameH;
const scale = Math.min(kW, kH); // 等比缩放，防变形
<p>canvas.width = gameW;
canvas.height = gameH;
canvas.style.width = screenW + 'px';
canvas.style.height = screenH + 'px';
ctx.scale(scale, scale);- realme GT 的
devicePixelRatio多为 2.75 或 3，但渲染区仍按逻辑像素计算，别被高 DPR 带偏 - 务必用
canvas.style.width/height控制显示尺寸，用canvas.width/height控制绘图缓冲区，两者分离才清晰 - 字体大小建议用
rem或vw，避免 canvas 内部再做文字缩放（失真严重）
字体与点击热区必须单独校验，GT 的触摸精度高于常规安卓机
realme GT 系列采用高灵敏度压感屏，但默认 CSS font-size: 14px 在 390px 宽度下实际渲染仅约 10px 物理像素，导致文字发虚；同时 padding: 5px 的按钮热区在 GT 上可能小于系统最小点击阈值（48×48 dp ≈ 132×132 px @3x）。
- 正文最小字号建议不低于
16px（或1rem，配合上述动态 rem） - 所有可点击元素（
button、a、带onclick的div）必须满足：min-height: 44px+min-width: 44px（iOS/Android 通用安全值） - 避免用
em嵌套控制字体，GT 的字体渲染引擎对多层继承敏感，易出现意外缩放
最常被忽略的一点：realme 系统自带“极简模式”或“性能模式”，会强制降频并限制 JS 执行频率 —— 动画帧率、轮播间隔、canvas renderLoop 都可能卡顿。上线前务必在 realme GT 实机关闭省电模式测试。
