必须加 viewport 且 width=device-width 是底线，LG 手机因非标准屏幕比例、高刷新率或自定义 UI 易导致强制缩放或横向滚动；仅设 initial-scale=1 而忽略 width=device-width 会造成内容压扁或留白。
必须加 viewport 且 width=device-width 是底线
LG 手机（如 LG G7、V30、Wing 等）虽属 Android 阵营，但部分机型存在非标准屏幕比例（比如 21:9）、高刷新率或自定义 UI 覆盖状态栏，若漏掉基础视口控制，页面会直接被强制缩放或横向滚动。很多开发者只写 initial-scale=1，却忽略 width=device-width，结果在 LG Q6（720×1440）或 LG Wing（1080×2460）上内容被压扁或右侧留白。
-
是最低要求；maximum-scale=1.0和user-scalable=no可防 LG 自带浏览器双击放大 bug - LG WebOS TV 或旧款 LG Browser（基于 WebKit 537）不支持
env(safe-area-inset-top)，需用 JS 回退检测：navigator.userAgent.includes('LGBrowser') - 某些 LG 安卓机（如 K10 系列）默认禁用 pinch-zoom，但未声明
user-scalable=no时，仍可能触发意外缩放抖动
用 rem + 动态根字体适配 LG 的多分辨率屏
LG 机型分辨率跨度极大：从入门款 K5（480×854）到旗舰 Wing（1080×2460），单纯用媒体查询写断点既难维护又易漏。rem 方案更稳妥——它靠修改 html 根元素的 font-size 来驱动整个页面等比缩放，LG 浏览器对 rem 支持度稳定（Chrome for Android ≥ 4.4，LG 自研浏览器 ≥ 5.0）。
- 推荐以 375px（iPhone 6 屏宽）为基准，按比例计算：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 100 + 'px'; - LG Wing 这类 21:9 屏，
clientWidth返回的是逻辑像素（如 414px），不是物理像素，所以该公式依然有效；但需注意其devicePixelRatio为 2.25，图片资源建议提供 @2.25x 或用 srcset fallback - 避免用
flex-basis或height写死 rem 值（如height: 10rem），LG 某些系统 WebView 中，rem 在 flex 子项中计算异常，改用min-height或百分比兜底更稳
处理 LG 特有安全区与状态栏遮挡
LG V 系列、Wing 等机型有长刘海+底部圆角+侧滑键盘区，但不像 iOS 提供标准 safe-area-inset-*，而是依赖厂商定制实现。直接写 env(safe-area-inset-bottom) 在 LG 手机上多数返回 0，导致底部按钮被系统栏盖住。
- 优先用 JS 检测实际可用视口：
const { innerHeight, screenTop } = window; const safeBottom = screenTop > 0 ? innerHeight - screenTop : 0;（适用于 LG WebOS 和部分安卓 LG Browser） - 对纯 H5 页面，可在 body 上加 class：
lg-safe-bottom，配合 CSS：.lg-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 16px); }——这里16px是 fallback 值，LG 不识别 env 时就用它 - LG G8 ThinQ 曾出现
constant(safe-area-inset-bottom)返回负值的问题，务必加max(0px, ...)包裹，否则 padding 变成负数，内容上移溢出
避开 LG 浏览器对 CSS Grid 和 aspect-ratio 的兼容陷阱
LG 自研浏览器（尤其 WebOS TV 和老款手机）对新 CSS 特性支持滞后：Grid 布局在 LG WebOS 4.x 中仅支持 display: grid，但不支持 grid-template-areas；aspect-ratio 在所有 LG 设备上均未实现（截至 WebOS 6.0 / Android 12 LG 定制版）。
立即学习“前端免费学习笔记（深入）”；
- 不要用
aspect-ratio: 16/9控制视频容器，改用padding-top: 56.25%+position: absolute经典方案 - Grid 的
gap在 LG WebOS 5.0 下表现异常（间隙被吃掉一半），建议统一用margin替代 - LG V50 ThinQ 的 Chrome 80 内核不支持
@container查询，也别指望scroll-snap在 LG 滚动容器里精准停靠——实测偏移量常达 ±40px
LG 机型适配真正的难点不在分辨率，而在「同一型号不同系统版本行为不一致」：比如 LG K50S 在出厂 Android 9 和 OTA 升级到 Android 11 后，WebView 对 vh 的解析逻辑变了（前者按可视窗口，后者按含状态栏高度）。这类问题无法靠一套 CSS 解决，必须结合 UA 检测 + 运行时测量 + 降级样式三重保障。
