必须手动选具体设备或启用设备仿真并显示绿色提示条才生效；本地服务需绑定0.0.0.0并用局域网IP访问；真机调试须确保Web Inspector、USB信任及Android调试开关开启；语义标签需验证DOM存在性、DOCTYPE规范及渲染模式为Standards。
直接在真机上用局域网访问 + Chrome DevTools 设备模拟 + 语义标签运行时检测，就能覆盖 90% 的响应式模板兼容性问题。云平台不是必须项，反而容易掩盖 viewport 解析差异和 JS 行为偏差。
怎么让 Chrome DevTools 设备模拟真正生效
点设备图标不等于启用真实 viewport 行为，很多 @media 查询压根不会触发。
- 必须手动选一个具体设备（如
iPhone 12或Pixel 5），或点击齿轮图标 → 勾选Enable device emulation并设置 UA 和屏幕尺寸 - 页面顶部出现绿色提示条
Device emulation enabled才算成功，否则@media (max-width: 768px)可能完全没运行 -
window.innerWidth会被正确模拟，但screen.width不会更新——如果 JS 里用了后者做判断，得手动刷新后观察值
为什么真机访问 localhost 总是 404
这不是代码问题，是网络层限制：手机的 localhost 指向它自己，不是你的开发机。
- 查开发机局域网 IP（
ipconfig或ifconfig），把本地服务绑定到0.0.0.0:3000（不是默认的127.0.0.1:3000） - 手机浏览器访问
http://192.168.x.x:3000，确保和电脑在同一 Wi-Fi - 嫌配 IP 麻烦？用
npx serve或python3 -m http.server 8000，它们默认就监听所有接口
怎么验证 HTML5 语义标签是否被识别
很多“布局塌陷”“样式不生效”问题，根源是浏览器根本没把 <header>、<main> 当成合法标签——它直接当未知 inline 元素丢弃了。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools 的 Elements 面板，手动展开 DOM 树，确认
<nav>、<section>等标签是否完整存在，而不是被自动闭合或包裹进<div> - 在 Console 中执行：
document.querySelectorAll('header, main, nav, footer').length，返回值为0就说明标签未被识别（常见于 IE8–10 或旧 Android WebView） - 检查
<!DOCTYPE html>是否独占第一行、前面**无空格、无注释、无 BOM**；用 Chrome DevTools 的 Elements 顶部查看渲染模式，必须显示Standards，不是Quirks
怎么判断某个 HTML5 API 能不能安全调用
查 caniuse.com 是第一步，但“支持”不等于“能用”。比如 localStorage 在 Safari 无痕模式下存在但会抛错；dialog.showModal() 在 Safari 16.2 返回 true 却不触发 close 事件。
- 不要只写
'localStorage' in window，要加try/catch：
try{
localStorage.setItem('test','ok');
localStorage.removeItem('test');
}catch(e) {
// 降级到 cookie 或内存缓存
}
typeof HTMLDialogElement !== 'undefined' 比 'showModal' in document.createElement('dialog') 更准，后者在 Safari 16.0–16.3 会误报inert，得创建元素并赋值：const el = document.createElement('div'); el.inert = true; return el.inert === true;，不能查 'inert' in document.body
最容易被忽略的是：viewport 元标签是否生效、DOCTYPE 是否干净、以及语义标签是否真被解析为 DOM 节点——这三者不达标，后续所有媒体查询和 JS 特性检测都可能跑偏。
