Less无法抹平Android与iOS的CSS差异，因其仅是编译时工具，无法感知运行环境；需通过@supports、媒体查询和平台变量显式声明并隔离差异。
不能靠Less“抹平”Android与iOS的CSS差异，它只能帮你把已知平台差异组织得更可控；真正在意兼容性，得先承认并显式声明差异点，再用@supports、媒体查询和条件编译兜底。
为什么Less本身不解决平台差异
Less是编译时工具，它无法读取运行环境（比如navigator.platform或WebKit内核版本），所有“适配”都必须基于你提前知道的规则手动编码。iOS Safari 和 Android WebView 的差异不是语法问题，而是渲染引擎行为不一致：比如env(safe-area-inset-bottom)在 iOS 11+ 可用，但多数安卓 WebView 直接忽略；input[type="date"]在 iOS 渲染为原生滚轮，在安卓上可能只是文本框——这些根本没法用变量或 mixin “统一”。
- Less 编译后仍是静态 CSS，不会根据 UA 动态生成规则
- 所谓“抹平”，其实是把两套写法都写进去，再靠浏览器自己选一条生效
- 硬塞一个
.ios-only { ... }类名到 HTML 里，再用 JS 注入 class，这种方案比 Less 更直接也更可靠
@supports + 媒体查询才是实际落地的组合
真正能触发浏览器条件判断的，只有@supports和媒体查询。Less 只负责把它们封装得不重复、易维护。
- 用
@supports (padding: env(safe-area-inset-bottom))包裹安全区适配代码，iOS 生效，安卓跳过 - 针对 WebKit 内核特有 bug（如
overflow: hidden下border-radius裁剪失效），写@supports (-webkit-appearance: none)隔离修复 - 安卓 WebView ≤ 6.0 不支持
gap，但@supports not (gap: 1rem)在旧内核里根本不会解析——所以必须配合@media screen and (-webkit-min-device-pixel-ratio: 0)这类 hack 检测 WebKit - 不要在 mixin 里直接写
@supports块，它会被展开多次；应定义为带 guard 的函数式 mixin：.safe-padding() when (@platform = ios) { padding-bottom: env(safe-area-inset-bottom); }
变量与 mixin 必须按平台分层设计
公共库里的@primary-color可以跨平台，但涉及渲染行为的变量（比如滚动条样式、输入框聚焦边框、阴影强度）必须拆开。
- 定义平台变量：
@platform: ios;或@platform: android;，在项目入口文件中显式赋值（不加!default） - 避免裸名 mixin：
.scrollbar-ios()和.scrollbar-android()比.scrollbar()安全得多——后者一旦被两个平台同时 import，就可能互相覆盖 - 安卓 WebView 中
transform: translateZ(0)常引发闪烁，iOS 却依赖它触发 GPU 加速；所以.hardware-accelerate()mixin 应该内部判断@platform，分别输出translateZ(0)或rotate(0.001deg) - 字体渲染差异（iOS 用 San Francisco，安卓用 Roboto）不能靠 Less 解决，但可以用
font-family: -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;让系统自动 fallback
最易被忽略的点：构建时路径与运行时环境错位
你在 Less 里写的@media (min-width: 375px)，编译后就是死值；但真实设备宽度是运行时决定的。很多团队误以为“写了响应式就等于适配了”，结果在折叠屏或横屏安卓机上布局崩坏。
- 不要用 Less 变量存
@screen-md: 768px然后到处@media (min-width: @screen-md)——这只能覆盖预设断点，不是真实视口 - REM 方案中
html { font-size: calc(100vw / 7.5); }是运行时计算，Less 无法替代；它只适合封装rem(16)这种单位转换函数 - 真正需要 Less 干的，是把不同平台的 fallback 规则收口：比如 iOS 用
backdrop-filter: blur(10px)，安卓 fallback 到background: rgba(255,255,255,0.8)，这两个写法都放进 mixin，调用时自动选一个
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
