HTML如何通过link标签实现特定客户端的适配-html教程-PHP中文网

link的media属性仅对rel="stylesheet"生效，其他rel值如preload、prefetch等会完全忽略media；写错media语法则降级为all，而非报错或静默失效。

html如何通过link标签实现特定客户端的适配

浏览器压根不检查 media 值是否匹配，除非 rel 明确是 stylesheet。常见错误是写成：

<link rel="preload" media="print" href="style.css"> —— media 被完全忽略，等同于没写
<link rel="prefetch" media="(max-width: 768px)" href="mobile.css"> —— 不会按条件加载，也不会报错，只是白写了

真正起作用的只有这一种形式：

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mobile.css">

它在 HTML 解析阶段就决定是否发起网络请求：匹配则下载并应用；不匹配则跳过请求（不是下载后丢弃）。

浏览器对 media 值语法非常严格，写错不会提示，而是直接降级为 all（即所有设备都加载），这容易掩盖问题。

media="screen, (min-width: 768px)" ❌ 逗号表示“或”，但 screen 是媒体类型，(min-width:...) 是媒体特性，不能并列；结果等效于 all
media="not screen and (orientation: landscape)" ❌ not 必须包裹整个表达式：not (screen and (orientation: landscape))
media="(device-width: 375px)" ❌ iOS Safari 横屏时 device-width 返回错误值，应改用 width

调试时注意：Network 面板里根本看不到被跳过的 CSS 请求——这不是 bug，是设计如此。如果没看到某条 link 的请求，先查 media 语法，再查路径。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

sizes 属性不支持空格分隔多个值，每个 <link> 只能声明一种尺寸。现代设备（尤其是高 DPI 屏、iOS、Android PWA）会根据上下文从多个候选中选最合适的，漏掉关键尺寸就会模糊或 fallback 到 16×16。

必须分开写：<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">、<link rel="icon" href="/icon-192.png" sizes="192x192" type="image/png">
sizes="any" 只对 .ico 文件有效，且仅用于声明“可缩放”，不能替代 PNG 尺寸声明
iOS 完全不读 rel="icon"，必须单独加：<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180">

服务器返回的 MIME 类型也必须匹配：.png 要返回 image/png，.ico 要返回 image/x-icon，否则 Chrome 等浏览器静默跳过，控制台无提示。