HTML怎么做兼容性测试_html浏览器兼容性测试方法【经验分享】-html教程-PHP中文网

兼容性测试需分层验证：先确认html结构与api识别，再检查样式交互，最后真机测试触控等细节；跳过任一层易致上线崩溃。

html怎么做兼容性测试_html浏览器兼容性测试方法【经验分享】

兼容性测试不是“测一遍就完事”，而是围绕真实用户环境分层验证：先确认浏览器是否识别你的 HTML 结构和 API，再看样式和交互是否按预期运行，最后在真机上验证触控、输入、网络降级等细节。跳过任一层，上线后都可能突然崩。

怎么快速验证 HTML5 语义标签是否被识别

很多“布局塌陷”“样式不生效”问题，根源是浏览器根本没把 <header></header>、<main></main> 当成合法标签——它直接当未知 inline 元素丢弃了。

打开 DevTools 的 Elements 面板，手动展开 DOM 树，确认 <nav></nav>、<aside></aside> 这些标签是否完整存在，而不是被自动闭合或包裹进 <div> <li>在 Console 中执行：<code>document.querySelectorAll('header, main, nav, footer').length，返回值为 0 就说明标签未被识别（常见于 IE8–10 或旧 Android WebView）
检查 <doctype html></doctype> 是否独占第一行、前面**无空格、无注释、无 BOM**；用 Chrome DevTools 的 Elements 顶部查看渲染模式，必须显示 Standards，不是 Quirks
IE8 及以下需 html5shiv + 手动 CSS：header, nav, section, article, aside, footer { display: block; }，只引脚本不够

怎么判断某个 HTML5 API 能不能安全调用

查 caniuse.com 是第一步，但“支持”不等于“能用”。比如 localStorage 在 Safari 无痕模式下存在但会抛错；dialog.showModal() 在 Safari 16.2 返回 true 却不触发 close 事件。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

不要只写 '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

怎么用 CSS 做渐进式降级而不写两套样式

@supports 不是锦上添花的玩具，它是让现代样式安全落地的护栏。别把它和媒体查询混用，也别指望它覆盖所有旧浏览器（IE 完全不支持）。

基础布局用 Flexbox 写，再用 @supports(display: grid) 给支持 Grid 的浏览器升级为二维布局：
```
@supports(display: grid) {
  .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); }
}
```
避免嵌套太深：@supports(backdrop-filter: blur(2px)) and (not (-webkit-backdrop-filter: blur(2px))) 这种写法在 Safari 15.4+ 才生效，但 Safari 15.4 之前连 @supports 都不支持，所以必须有兜底（比如默认用半透明白色背景）
CSS.supports() 在 JS 中可用，但 Safari 15.4+ 才开始支持第二参数形式（CSS.supports('contain', 'layout')），旧版只能用字符串形式：CSS.supports('contain: layout')

怎么验证真机上的实际表现

模拟器和桌面版开发者工具看不出触控延迟、软键盘弹出逻辑、摄像头权限拒绝后的 UI 回退、甚至 iOS Safari 对 position: fixed 的特殊处理。

必测场景：表单聚焦时软键盘是否遮挡输入框（尤其 inputmode="numeric" 在 iOS Safari 16.4 前无效）、dialog 关闭后页面是否滚动回顶部、video 自动播放是否被静音拦截
用 BrowserStack 或 Appetize.io 测主流 iOS/Android 真机，重点看 Safari、Chrome for Android、微信 X5 内核（UA 含 TBS/045907 或 MQQBrowser）
上线后用 window.onerror + navigator.userAgent（仅作归因，不用于逻辑分支）收集真实错误，比如 Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document 这类报错，在本地永远复现不了

最常被忽略的一点：兼容性不是“支持列表对得上就行”，而是每个特性在目标浏览器中是否按你写的逻辑执行。Safari 对 dialog 的 preventScroll 选项、Chrome 对 popover 的 anchor 属性绑定时机、Firefox 对 inert 的穿透行为——这些细节差异，光靠 caniuse.com 的 ✅❌ 图标根本发现不了。