关键在于分场景、讲优先级、守位置：IE仅需且必须为head中第二个标签；国产双核浏览器需renderer与force-rendering双meta并置head最前；viewport须静态含viewport-fit=cover；DOCTYPE和UTF-8无BOM为前提。
要让 HTML 页面在不同浏览器和终端上正常渲染，关键不是堆砌一堆 meta 标签，而是分场景、讲优先级、守位置——尤其对已退场的 IE 和仍在活跃的国产双核浏览器，策略完全不同。
IE 兼容模式：只留 IE=edge，且必须放最前
IE 已于 2022 年 6 月正式退役，仅极少数政企内网系统还需适配。若确需支持，唯一有效写法是：
-
只用
<meta http-equiv="X-UA-Compatible" content="IE=edge">，其他如 IE=7、IE=EmulateIE7、chrome=1 全部失效或冗余 - 该标签必须是
中**第二个标签**，紧接<meta charset>之后，前面不能有任何内容（包括 BOM、空格、注释、<title></title>） - 它不控制 Chrome/Firefox/Edge(Chromium)，这些浏览器完全忽略；仅对 IE8–IE11 和旧版 EdgeHTML 有效
国产双核浏览器：renderer + force-rendering 双保险
360、QQ、搜狗等浏览器默认可能用 Trident（IE）内核渲染现代页面，导致 Flex/Grid 失效、fetch 报错。必须主动指定内核：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
<meta name="renderer" content="webkit">：主标签，适用于新版 360 极速、UC、部分 QQ -
<meta name="force-rendering" content="webkit">：关键 fallback，覆盖旧版 360、2345、猎豹等不识别 renderer 的版本 - 两者都必须放在
最开头，早于<title></title>、<meta charset>，且content值严格小写，仅接受webkit、ie-comp、ie-stand
移动端安全区与缩放：viewport 必须静态+完整
iPhone X 及后续机型、部分安卓折叠屏会出现底部被裁切或按钮错位，根源常在 viewport 配置不全：
立即学习“前端免费学习笔记（深入）”；
-
必须包含
width=device-width, initial-scale=1.0, viewport-fit=cover，缺viewport-fit=cover则env(safe-area-inset-bottom)恒为 0 - viewport 必须静态写在 HTML 源码
最前，JS 动态插入、SSR 漏传、CMS 重复注入都会导致 Safari 或 WebView 忽略 - 禁用
user-scalable=no：iOS 16.4+ 已限制其行为，且违反可访问性标准；如需控制缩放，应靠业务逻辑而非锁死
真正起效的前提：DOCTYPE 和编码声明不能出错
所有 meta 渲染控制都建立在标准解析基础上：
- 第一行必须是
，前面不能有任何字符（含 BOM），否则触发怪异模式，meta 全部失效 -
<meta charset="UTF-8">应紧跟 DOCTYPE，确保中文、符号、JS 字符串解析正确；保存文件时选 “UTF-8 无 BOM” - 不要依赖 meta 标签“覆盖”用户手动开启的兼容性视图（如地址栏按钮）或企业组策略，这类设置优先级更高，meta 无法绕过
