跨平台HTML需规避渲染差异：用保守语义结构、显式控制与最小依赖；禁用私有CSS属性，慎用position:sticky；表单控件须降级处理；rem基准用clientWidth而非devicePixelRatio；script加载需严格区分defer/async。
跨平台 HTML 不是“写一次，到处跑”，而是得主动避开各平台渲染引擎的差异点。核心原则：用最保守的语义化结构 + 显式控制 + 最小化依赖。
避免使用 WebKit-only 或 Blink-only CSS 属性
比如 -webkit-appearance、-webkit-overflow-scrolling 在 Firefox 或旧版 Edge 中直接失效；scroll-behavior: smooth 在 iOS Safari 15.4 之前不支持平滑滚动。这类属性一旦滥用，会导致表单控件样式崩塌或滚动体验断裂。
- 只在明确需要且已加兜底时使用私有前缀，例如：
-webkit-appearance: none;后必须紧跟appearance: none; - 对
position: sticky这类“半支持”特性，先检查父容器是否设置了overflow（iOS Safari 下会禁用 sticky） - 用
@supports包裹实验性功能，而不是靠 UA 判断：“@supports (backdrop-filter: blur(1px)) { ... }”
表单控件要手动重置默认样式
iOS Safari 的 <select>、<input type="date"> 无法通过 CSS 完全自定义外观，Android Chrome 又可能忽略 appearance: none。直接写 <select class="custom-select"> 而不做降级，用户在部分设备上看到的是两个下拉箭头（原生 + 自定义）。
- 对
<select>，优先用<div>+<button>+<ul>模拟，用role="combobox"保无障碍 -
<input type="date">在不支持的环境（如微信内置浏览器）中退化为type="text"，需用 JS 检测并加载日历组件 - 所有
input都显式设置font-size和line-height，否则 iOS 上文字会缩放错位
避免依赖 window.devicePixelRatio 或 screen.width 做关键布局
很多安卓 WebView（尤其国内定制壳）返回的 window.devicePixelRatio 是错误值；微信内嵌浏览器在横屏时 screen.width 仍返回竖屏数值。用它们做 rem 基准或图片 srcset 切换，会导致高清屏显示模糊或布局错乱。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- rem 基准推荐用
document.documentElement.clientWidth / 375 * 100（以 375px 设计稿为基准），而非devicePixelRatio - 响应式图片用
srcset+sizes，不要靠 JS 动态拼接2x图路径 - 检测横竖屏用
window.matchMedia("(orientation: landscape)")，比读screen更可靠
script 标签加载顺序和 defer/async 要严格区分
某些低版本 WebView（如 Android 4.4 System WebView）不支持 async，遇到就阻塞解析；而 defer 在部分微信版本中会延迟执行到 DOMContentLoaded 之后，导致初始化逻辑失败。
- 第三方 SDK（如统计、埋点）一律用
async+onload回调触发初始化 - 业务主逻辑脚本放在
</body>前，不加async或defer，确保顺序执行 - 用
document.currentScript获取当前 script 元素路径时，要加if判断兼容性，老 WebView 返回null
最常被忽略的一点：不是所有“HTML5”标签都能被正确识别——比如 <dialog> 在 Safari 15.4 之前无样式支持，<details> 在部分安卓 WebView 中点击无反应。别假设语义化标签自带行为，该 polyfill 就 polyfill，该模拟就模拟。
