必须设置viewport meta标签，否则vw/vh计算基准错乱导致大屏错位、文字模糊；实操需硬编码<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">于head顶部。
viewport 不设就全崩，必须写死
不加 <meta name="viewport">，大屏在高分屏或移动端直接错位——浏览器按 980px 模拟桌面渲染，vw/vh 基准全乱，文字糊、图表缩成一团。这不是“偶尔出问题”，是必现。
实操只认这一行：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- 别用
target-densitydpi（已废弃），安卓 WebView 也不认 - 别 JS 动态注入 viewport，部分旧内核根本不解析
- 这行必须硬编码在
<head>最顶部，不能 defer 或异步
用 transform: scale 而不是 rem/vw 做整体缩放
rem 在 1920px → 3840px 跨度下小数精度逐层累积，字体、边框、间距全漂移；纯 vw 字体在 iPad 小屏下会缩到 8px 看不清。真正稳的方案是：按设计稿宽高比（比如 16:9）计算缩放系数，用 transform: scale() 整页缩放。
- 缩放容器必须设
transform-origin: 0 0，否则内容偏移 - canvas 图表要同步处理：
canvas.width = canvas.offsetWidth * window.devicePixelRatio，再设canvas.style.width = "100%" - resize 监听只更新
transform，不要重绘 DOM 或调图表setOption
ECharts 容器尺寸为 0 导致初始化失败
Cannot initialize ECharts instance before container is ready 这个报错不是代码写错，是容器 DOM 已挂载但 offsetWidth/offsetHeight 仍为 0 —— 常见于 Vue 异步组件、CSS 未生效、父容器没设高。
立即学习“前端免费学习笔记（深入）”；
- 确保 ECharts 容器父级有明确高度（如
height: 100vh），不能依赖height: 100% - Vue 中 init 前包一层
nextTick，等 DOM 渲染完成再取 ref - 多个图表必须各自绑定
window.addEventListener('resize', () => chart.resize())，不能共用一个监听器 - resize 必须节流，推荐
throttle(chart.resize, 200)，否则高频触发导致卡顿
超大屏两侧留白失控，靠 max-width 分段控制
写死 max-width: 1200px 在 4K 屏上左右各空 1320px，不是“留白美观”，是内容被物理压缩。真正的留白得随设备能力呼吸。
- @media (min-width: 1440px) {
max-width: 1200px} - @media (min-width: 1920px) {
max-width: 1440px} - @media (min-width: 2560px) {
max-width: 1680px} - 容器必须同时声明
width: 100%+margin: 0 auto，否则 Safari 下窄屏不占满 - 禁止在
<body>或<html>上设任何margin/padding，会破坏 iOS/Android 边缘手势穿透区
字体模糊、横向滚动条意外出现、全屏后图表塌陷……这些问题背后几乎都指向同一个事实：大屏适配不是调几个单位的事，而是整套渲染链路的协同控制。最易被跳过的环节，往往藏在 viewport 和容器 height 的那一行声明里。
