viewport标签缺失或写错会导致页面缩成一团：浏览器按980px桌面宽度渲染后整体缩小，文字模糊、按钮失准、媒体查询失效；正确写法是<meta name="viewport" content="width=device-width, initial-scale=1.0">且必须置于<head>最顶部。
viewport 标签缺失或写错，页面直接缩成一团
不加 <meta name="viewport">，移动端浏览器就按桌面默认宽度（通常是 980px）渲染，再整体缩小——文字小到看不清，按钮点不准，@media 规则压根不触发。这不是“显示不好”，是根本没进入响应式流程。
正确写法只有一句，且必须放在 <head> 最顶部：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width和initial-scale=1.0缺一不可：只写前者，某些 Android Chrome 会强制缩放；只写后者，横屏时可能拉伸变形 - 禁用
user-scalable=no或maximum-scale=1.0：不仅违反 WCAG 可访问性要求，iOS 13+ 已部分忽略，还会让视障用户无法放大阅读 - 别用
target-densitydpi=device-dpi这类旧 Android 专有属性：已废弃多年，现代浏览器直接忽略或引发兼容问题
媒体查询断点失效，不是设备问题而是检测逻辑错位
写 @media (max-width: 767px) 看似合理，但实际调试中常发现样式没生效——问题往往不在 CSS 本身，而在断点设定方式和执行时机。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 优先用
min-width自下而上增强：基础样式写在常规 CSS 中，只对大屏“加”规则。避免max-width嵌套导致覆盖混乱，尤其在构建工具提取关键 CSS 时更易出错 - 断点按内容定，不是按设备型号：比如卡片容器撑到 750px 才需从单列变双列，那就用
@media (min-width: 750px)，而非硬套 “平板 768px” - 双屏设备（如 Fold、Surface Duo）会让
window.innerWidth返回错误值（例如 1800px），实际可用宽度可能只有 400px。此时@media断点完全失效，必须改用 CSS 容器查询 +getBoundingClientRect()获取真实尺寸
图片和字体在不同 DPR 屏幕上模糊或过大
只写 max-width: 100% 能防溢出，但解决不了加载问题：小屏加载 2000px 图浪费带宽，高清屏（DPR=2/3）加载 1x 图就会模糊。
立即学习“前端免费学习笔记（深入）”；
- 必须配
srcset+sizes：例如<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 750px, 1200px">，缺sizes就退化为浏览器随机选图 - 字体别只靠
px：小屏上 16px 文字可能刚好，DPR=3 的 iPhone 上却等效 48px 渲染。改用rem或clamp(1rem, 2.5vw, 1.25rem)动态缩放更稳 - 避免用
100vw做全宽容器：双屏展开时它会跨过铰链区，造成内容溢出或中间留白条
触摸目标太小，手指点不准还被系统拦截
PC 上 12px 链接能点准，移动端手指精度有限，44×44px 是苹果和 Google 共同推荐的最小可触区域——但很多开发者只调 font-size，忘了 padding 和 margin 的实际贡献。
- 可点击元素的物理尺寸（含 padding）必须 ≥ 48×48px：用
min-inline-size: 48px; min-block-size: 48px比单纯加padding更可靠，防止文字过短时 padding 不生效 - 禁用
-webkit-touch-callout: none要谨慎：虽然能关掉长按复制菜单，但也会同时禁用 VoiceOver 的长按朗读功能，影响屏幕阅读器用户 - 双屏设备铰链区（约 16–24px 宽）默认不可交互，CSS 中需显式设
pointer-events: none，否则会误触触发事件
viewport 标签是否真在 <head> 顶部、sizes 属性有没有漏写、以及双屏下是否还在用 window.innerWidth 判断布局——这些地方不显眼，但一错，整个适配就在用户看不见的地方崩了。 
