文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
必须写对viewport meta标签，否则所有适配失效；正确写法为，其中width=device-width匹配设备逻辑像素宽，initial-scale=1.0确保1:1缩放，缺一不可。
viewport 必须写对，否则所有适配都是空中楼阁
没加 <meta name="viewport"> 或写错参数，是跨平台渲染错乱的第一大原因。iOS Safari 和多数安卓 WebView 会默认按 980px 宽度渲染，再缩放显示，导致 rem 计算失准、vh 值漂移、媒体查询失效。
正确写法只有一条核心：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
width=device-width是关键，它让视口宽度 = 设备逻辑像素宽（如 iPhone 14 的 390px），不是固定 980px - 去掉
shrink-to-fit=yes（Safari 已废弃）、minimum-scale（干扰手势） - 生产环境建议保留
user-scalable=no，尤其表单页，避免用户双击放大破坏布局
语义标签要闭合，别指望浏览器帮你补
浏览器对未闭合标签的容错策略差异极大：Chrome 可能自动补全
实操底线：
- 显式写出所有可选结束标签：
、、 - 用 W3C Validator 扫一遍，重点看 “End tag for element X implied” 类警告
-
<main></main>、<section></section>这类语义标签，别直接塞进<p></p>或<span></span>里——它们需要块级上下文
class/id 命名与属性写法必须统一，否则 JS 和 CSS 都会翻车
命名不规范看似只是风格问题，实际会引发真实兼容性风险。比如 data- 属性在旧 Edge（EdgeHTML）、UOS 银河麒麟等信创环境中，el.dataset.foo 可能返回空对象；而 class="UserProfile" 这种驼峰写法，在某些国产 WebView 中会被 CSS 选择器忽略。
可靠写法：
- 所有 class/id 用小写 + 短横线：
user-profile-card，禁用驼峰和下划线 - 所有属性值强制双引号：
<img src="icon.svg" alt="menu">，单引号或无引号在 XHTML 或信创浏览器中易解析失败 -
data-属性一律用el.getAttribute('data-foo')读取，不用dataset；设置也用setAttribute - 布尔属性显式写全：
<input required="required">，而非<input required>
字体、单位、布局特性要分场景选，不能一招鲜吃遍天
很多人以为 “用了 rem 就跨平台了”，结果在 iOS Safari 上文字被系统动态字体放大，在华为 EMUI 上 vh 值始终不准，或在微信 X5 内核里 grid-template-areas 直接不渲染——这些都不是 bug，而是特性支持边界没摸清。
安全组合：
- 字号/内边距/圆角等「视觉节奏」类属性，用
rem+ JS 动态设html字体（基于document.documentElement.clientWidth，不用window.devicePixelRatio） - 全宽容器、视口高度占满等「结构性」尺寸，优先用
vw/dvh（100dvh替代100vh，避开 iOS 地址栏收起 bug） - 禁用
px写字体大小或间距——iOS 动态字体设置会让它强制放大 -
display: grid可用，但避开grid-template-areas（iOS 14.5 以下不支持），改用grid-template-columns+grid-column
最常被忽略的一点：所有 @font-face 中的 format() 必须匹配真实文件类型，format('woff2') 写成 format('woff')，Safari 就会静默拒绝加载——连 fallback 都不会触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
