vw/vh在uni-app中仅H5端原生支持，需正确配置viewport；小程序等平台不支持，须用rpx或动态计算降级适配，且需按平台条件切换样式。
vw 和 vh 在 uni-app 中可以直接用，但必须搭配 viewport 正确配置，否则在小程序端会失效或表现异常。
uni-app 中 vw/vh 的生效前提
uni-app 的 H5 端默认支持 vw/vh，但微信小程序、App（vue 页面）、快应用等平台不原生支持 CSS 视口单位——它们的渲染引擎（WebView 或小程序视图层）不解析 100vw 这类值，会直接当无效样式丢弃。
- ✅ H5 端：只要
<meta name="viewport">设置合理（如width=device-width, initial-scale=1.0），vw/vh可直接使用 - ❌ 微信小程序：编译后会被忽略，
width: 100vw等同于没写 - ⚠️ App 端（vue 页面）：部分 Android WebView 版本支持有限，iOS WKWebView 支持较好，但仍有兼容性波动
所以不能“写了就跑”，得先确认目标平台是否真能识别。
如何让 vw/vh 在多端真正可用
核心思路是：H5 用原生 vw/vh，非 H5 平台降级为 rpx 或动态计算。uni-app 不提供自动转换，需手动处理。
- 用
uni.getSystemInfoSync().platform判断当前平台，在style或class上做条件切换 - 在
pages.json的h5 > css配置中启用postcss-px-to-viewport插件，把设计稿 px 转成vw（仅对 H5 生效） - 避免在
scoped样式里混用vw和rpx，容易因编译顺序导致单位被错误覆盖 - 慎用
vh做全屏高度：微信小程序中100vh≠ 屏幕可视区高（常被导航栏/状态栏截断），建议用100%+ flex 布局替代
示例：适配 H5 和小程序的宽度声明
<view :class="{ 'h5-full': isH5, 'mp-full': !isH5 }"></view>
<style>
.h5-full { width: 100vw; }
.mp-full { width: 750rpx; }
</style>
<script>
export default {
data() {
return {
isH5: uni.getSystemInfoSync().platform === 'h5'
}
}
}
</script>vw/vh 与 rpx 的关键区别和选型建议
rpx 是 uni-app 自研单位，以 750px 设计稿宽度为基准；vw 是 CSS 标准单位，以当前设备可视区宽度为 100%。二者逻辑不同，不能混用或简单换算。
-
100rpx = (屏幕宽度 / 750) * 100px，只跟宽度有关，且固定按 750 基准缩放 -
100vw = 屏幕可视区宽度的 100%，跟设备实际window.innerWidth绑定，横竖屏切换时自动响应 - 做横竖屏适配时，
vmin/vmax比rpx更可靠（例如width: 90vmin表示取宽高中较小值的 90%） - 字体大小慎用
vw：小屏下易过小，推荐用rem+ 动态根字体或 uView 的u-text组件控制最小字号
容易被忽略的坑：viewport 元素缺失与缩放干扰
H5 端若没正确设置 <meta name="viewport">，vw 会基于错误的视口宽度计算，比如页面被强制缩放后，100vw 可能只有物理宽度的 50%。
- 确保
manifest.json > h5 > template中的 HTML 模板包含：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 禁用
user-scalable=yes，否则用户双指缩放会破坏vw布局比例 - 不要在 JS 中调用
document.body.style.zoom或修改transform: scale()，这会让vw值失准 - 调试时用 Chrome DevTools 的 Device Toolbar 模拟不同设备，注意右上角是否显示 “Responsive” —— 若显示 “Desktop”，
vw仍按桌面视口算，不是移动端效果
真正跨端稳定的布局，往往不是单靠某一个单位，而是根据平台能力分层兜底：H5 用 vw，小程序用 rpx，App（nvue）用 px + flex，再辅以运行时平台判断。
