HTML5如何适配realme GT手机_HTML5在GT系列上的适配方案【教程】

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，并让后续适配逻辑自己计算缩放 —— 不要靠“猜倍数”：

• 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); // 等比缩放，防变形
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 实机关闭省电模式测试。