viewport标签必须置于head最顶部且内容为width=device-width, initial-scale=1.0，缺一不可；位置靠后、拼写错误或添加maximum-scale=1等参数均会导致小屏渲染异常、媒体查询失效及无障碍违规。
viewport 标签写错或缺失，页面在小屏上直接“失明”——文字缩成针尖、按钮点不中、横向滚动条强制出现，这不是 bug，是渲染开关没打开。
viewport meta 标签必须放在 最顶部且拼写零误差
所有异常表现（比如 iOS Safari 闪屏、Android Chrome 渲染两次）几乎都源于这行没写对或位置错了：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width不能写成device_width、width=deviceWidth或漏掉连字符，否则整个响应式链失效 - 该标签必须早于任何
<link rel="stylesheet">和<script></script>，否则 iOS Safari 可能先按桌面宽度渲染再重排 - 别加
maximum-scale=1或user-scalable=no——折叠屏用户要双指放大看细节，禁用即违反 WCAG
@media 查询只按 min-width 断点会漏掉横屏和小高度场景
仅靠 @media (min-width: 1024px) 匹配 iPad 横屏，但同样宽度的 Galaxy Z Fold 展开态需要三列，而 Flip 合盖态却应退回到单栏——宽度相同，语义不同。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须显式组合
orientation：@media (min-width: 768px) and (orientation: landscape) - 高度敏感组件（如登录框、弹窗）要加
@media (max-height: 600px)单独调padding和font-size - 折叠屏要用
@media (screen-spanning: single-fold-horizontal)精准识别展开态，旧版浏览器需 JS 回退，不能全靠 CSS
Flex 和 Grid 混用同一容器会导致塌陷和调试黑洞
在 Android 4.4 WebView 或某些 Chromium 旧版本里，flex-wrap 和 grid-gap 可能被忽略；更麻烦的是，混用会让布局行为不可预测，尤其在折叠动画过程中。
- 导航栏、卡片流用
display: flex：小屏flex-direction: column，大屏切row - 内容区、仪表盘用
display: grid：例如grid-template-columns: minmax(300px, 1fr) 2fr，比百分比更可控 - 严禁在
display: flex容器里直接嵌套display: grid子元素做主布局——语义混乱，真机上容易塌陷
真正难的不是写断点，而是区分「视口宽度」和「设备物理能力」：iPad Pro 横屏宽 1024px，Z Fold 展开也是 1024px，但后者有铰链、有折叠动画、有两块独立屏幕区域。这些差异不会体现在 window.innerWidth 里，只能靠 screen-spanning 媒体查询或 window.matchMedia 监听状态切换——resize 事件在折叠动画中会高频抖动，千万别直接绑 DOM 操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
