移动端HTML布局必须基于逻辑像素（device-width）做基准，否则rem、flex或媒体查询都会失准；viewport必须同时写全width=device-width和initial-scale=1.0，缺一不可，且rem基准需动态绑定逻辑像素宽度而非固定值。
移动端 HTML 布局必须基于逻辑像素（device-width）做基准，否则 rem、flex 或媒体查询都会失准——这不是“要不要加 viewport”的问题，而是加错参数或漏关键项就会直接导致布局塌缩、字体模糊、1px 边框变粗。
viewport meta 标签必须同时写全 width=device-width 和 initial-scale=1.0
只写 width=device-width 而不写 initial-scale=1.0，在部分 Android WebView 或旧版 iOS Safari 中仍可能触发非 1 缩放，导致 CSS 像素与逻辑像素脱钩。此时 1rem 计算失效，@media (max-width: 750px) 判定错乱。
-
width=device-width告诉浏览器：layout viewport 宽度 = 设备screen.width（即逻辑像素宽，如 iPhone 13 是 390） -
initial-scale=1.0锁定初始渲染比例，确保 1 个 CSS 像素对应 1/dpr 个物理像素，避免字体被浏览器自动压缩 - 不要用
user-scalable=no—— 它会禁用双指缩放，违反 WCAG 可访问性要求，且某些安卓机型会因此忽略initial-scale
rem 基准值必须绑定到逻辑像素宽度，而非物理像素或固定数
常见错误是直接设 html { font-size: 100px; } 或硬编码 375px → 1rem = 100px。这在 iPhone XR（逻辑宽 414px）或 Pixel 7（逻辑宽 412px）上会放大布局，超出视口。
- 正确做法：用 JS 动态计算，例如
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 100 + 'px';（以 375px 设计稿为基准） - 更稳妥的是监听
resize和orientationchange，横屏时重新计算（注意：screen.width不随横竖屏变化，但document.documentElement.clientWidth会变） - 如果不用 JS，可用
clamp()配合视口单位：font-size: clamp(12px, 2.666vw, 16px);，但兼容性需查clamp()支持情况（iOS 14.5+、Android Chrome 88+）
table-layout: fixed 是 GIS/属性类表格在移动端不崩的底线
GIS 属性表字段长短混杂（如地址字段超长、坐标字段极短），默认 table 行为会让一列撑开整行，破坏等比缩放逻辑，rem 布局也会被带偏。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 必须加
table-layout: fixed，并配合<colgroup></colgroup>显式声明每列宽度（支持px、fr、百分比） - 中文长文本用
word-break: break-word，禁用white-space: nowrap—— 后者会让地址直接溢出容器，且无法触发横向滚动 - 表头加
position: sticky; top: 0;时，务必设tbody { display: block; max-height: 300px; overflow-y: auto; }，否则 sticky 失效
Flex 布局居中时，html 和 body 的尺寸约束不能省
只给 body { display: flex; justify-content: center; align-items: center; }，在多数移动端浏览器里会失败——因为 html 和 body 默认高度不占满视口，flex 容器没高度可居中。
- 必须显式设置：
html, body { height: 100%; margin: 0; } - 若页面有滚动需求，居中容器应套在额外
<div class="center-box"> 内，并设 <code>min-height: 100vh，避免内容少时 footer 上浮 - 注意：iOS Safari 对
vh单位有 bug（地址栏收起/展开时100vh不更新），稳妥做法仍是height: 100%+ flex
逻辑像素不是抽象概念，它是 screen.width 返回的值，是所有 CSS 单位（rem、vw、em）的真实锚点。任何跳过它直接操作物理像素（如 window.devicePixelRatio）或假设固定宽度（如“所有手机都是 375”）的做法，都会在真实机型上露出破绽——尤其当用户旋转屏幕、开启系统字体缩放、或使用折叠屏分屏模式时。
