HTML在安卓和iOS上存在系统级渲染差异，需针对性处理viewport、safe-area、input行为、flex/fixed布局、字体间距及WebView配置等问题，否则必然出现布局错乱、交互失效等兼容性问题。
是的，HTML在安卓和iOS上表现明显不同——不是“偶尔不一致”，而是系统级渲染引擎、WebView实现、CSS解析逻辑、输入行为、滚动机制等多层差异叠加的结果。不针对性处理，几乎必然出现布局偏移、键盘遮挡、fixed失效、表单控件降级等问题。
viewport 解析差异导致缩放与初始尺寸错乱
安卓 WebView（尤其旧版 Chrome 或厂商定制内核）对 maximum-scale=1.0 的支持不完整，仅设 user-scalable=no 在部分机型上完全无效；而 iOS Safari 严格遵循标准，但对 width=device-width 的像素映射更保守（例如某些高 DPI 安卓屏上报的 device-width 是物理像素，iOS 则按逻辑像素折算）。
- 必须同时写
maximum-scale=1.0和user-scalable=no，缺一不可 - 禁用已废弃的
target-densitydpi，它在 iOS 上被忽略，在安卓上可能引发冲突 - 适配刘海/挖孔时，用
padding-top: constant(safe-area-inset-top)和padding-top: env(safe-area-inset-top)并写，不能只写一个
input 行为不一致：键盘唤起、类型降级、focus 失效
<input type="date"> 在 iOS 上弹原生日期选择器，安卓 WebView（尤其 Android 9 以下或 App 内嵌 WebView）大概率退化为纯文本框，且不触发 change 事件；type="number" 在三星 Internet 浏览器中常无视 pattern，直接弹默认键盘。
- 优先用
inputmode="numeric"+pattern="[0-9]*"替代type="number"，兼容性更好 - 安卓 WebView 中
input.focus()可能不唤键盘，加setTimeout(() => input.focus(), 300) - 日期/时间选择建议弃用原生
type="date"，改用轻量级 JS 方案（如 iosselect 或 flatpickr 移动版） - 失焦后页面上滑问题：iOS 键盘收起会残留 scroll 偏移，需在
onblur中用window.scrollTo(0, Math.max(document.documentElement.scrollTop - 1, 0))微调归位
flex 布局与 fixed 定位在 iOS 上的典型失效
iOS Safari（14–15 系列）对 flex-wrap: wrap 容器的 align-content 默认值（stretch）处理异常，末行子项垂直偏移；而 position: fixed 在 iOS 中常因键盘弹出、页面滚动或容器高度计算误差导致“粘不住”——不是 bug，是滚动视口与渲染视口分离所致。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 多行 flex 容器务必显式声明
align-content: flex-start，别依赖默认值 - 避免给 flex 项目设
margin-bottom控制间距，改用gap（Chrome 84+/iOS 14.5+ 支持），或退化为margin-bottom+:last-child { margin-bottom: 0 } -
position: fixed元素若在键盘弹出后错位，不要硬修 fixed，应改布局：把固定区域设为position: absolute+overflow-y: auto容器内滚动，或限制内容区高度并启用scroll
字体、行高与间距的视觉偏差比想象中更顽固
同一 line-height: 20px，在 iOS 上文字常“坐得更高”，安卓则更居中；同样 margin-bottom: 10px，iOS 视觉距离常是安卓的 1.5–2 倍（尤其小字号下）。这不是渲染错误，是字体度量（font metrics）和 subpixel 渲染策略的根本差异。
- 小容器（高度 ≤ 30px）慎用
line-height居中，改用display: flex; align-items: center - 横向间距优先用
gap或padding，少用margin；纵向间距若跨平台不均，可针对 iOS 加@supports (-webkit-touch-callout: none) { ... }微调 - 不要指望“一套 CSS 调到两边像素级一致”，接受合理视觉容差，重点保障交互功能与信息可读性
最易被忽略的一点：很多问题看似是 CSS 或 HTML 的“兼容性”，实则是 WebView 容器本身的版本与配置（比如是否开启 enableSmoothScrolling、是否禁用双击缩放）在作祟。上线前务必在真实设备的主流 App 内嵌 WebView（微信、QQ、支付宝、银行类 App）中交叉验证，不能只靠模拟器或桌面 Chrome DevTools 的“Mobile View”。
