HTML跨平台兼容靠规范写法与浏览器共识，非专用语法；安全标签如<div><p><span><img><a>，禁用新属性及GPU加速样式；避免autoplay+muted、grid-template-areas、Noto字体、vh单位；scrollIntoView需统一参数，localStorage在X5内核有延迟。
HTML 跨平台代码本身不存在“专用语法”或“特殊标记”——所谓“跨平台”，靠的是规范写法 + 有限特性 + 浏览器兼容性共识，不是靠某个新标签或 magic 属性。
哪些 HTML 标签和属性真正在所有平台（桌面/安卓/iOS/小程序 WebView）里稳
浏览器内核（Blink/WebKit/Gecko）对标准 HTML5 的基础解析高度一致，但差异集中在「非语义化」和「表现层」功能上。
-
<div>、<p>、<span>、<img>、<a>这些语义清晰、无副作用的标签，只要不加loading="lazy"或decoding="async"这类较新属性，基本零兼容问题 -
class和id安全；style行内样式也行，但别写transform: translateZ(0)这种强制 GPU 加速的 hack，iOS 旧版 WKWebView 会闪屏或卡顿 - 避免用
<video>的autoplay+muted组合——安卓部分定制 ROM（如华为 EMUI）会静音拦截，iOS 则要求用户手势触发后才允许播放
CSS 里最常翻车的“跨平台假安全项”
很多人以为 “只用 flex 布局 + rem 单位 = 跨平台 OK”，实际掉坑最多的是 CSS 的隐式依赖行为。
-
display: grid在 iOS 14.5 以下 Safari 中不支持grid-template-areas，但grid-template-columns是 OK 的——别混着用，否则整块布局消失 -
font-family写"PingFang SC", "Helvetica Neue"没问题，但加个"Noto Sans CJK"就可能在某些安卓低版本系统里回退到默认等宽字体（因为字体未预装且无 fallback） -
vh单位在 iOS Safari 中有严重 bug：地址栏收起/展开时，100vh不会重算，导致内容被截或留白——改用100dvh（2023 年起支持），或 JS 动态设style.height = window.innerHeight + "px"
JavaScript 操作 DOM 时，哪些 API 看似通用实则分平台行为不同
不是语法报错才叫不兼容，DOM 行为差异才是真麻烦源。
立即学习“前端免费学习笔记（深入）”；
-
element.scrollIntoView()：iOS Safari 默认行为是平滑滚动，安卓 Chrome 默认是立即跳转；统一加参数{ behavior: "smooth", block: "nearest" }才可控 -
localStorage在微信内置浏览器（X5 内核）中，某些版本存在异步写入延迟，setItem后立刻getItem可能还是旧值——必须加setTimeout微任务兜底，或换用indexedDB -
fetch()默认不带 cookie，但安卓某些 WebView（如早期 QQ 浏览器）即使设了credentials: "include"也不发；更稳妥是服务端用 token header 代替 session cookie
真正难的不是写“能跑”的跨平台 HTML，而是写“行为一致”的 HTML。比如一个按钮点击反馈，在 iOS 上是 :active 伪类生效，在安卓上可能要靠 touchstart 手动加 class——这种细节没文档，只能靠真机测出来。
