vh 在不同浏览器表现不一致

--vh setProperty

css.ts

import { onMounted } from "vue";
function setVh() {
  let vh = window.innerHeight * 0.01;
  console.log("vh px", vh);
  document.documentElement.style.setProperty("--vh", `${vh}px`);
}
export function initVh() {
  onMounted(() => {
    setVh();
  });
  window.addEventListener("resize", () => {
    setVh();
  });
}

App.vue

export default {
  setup() {
    initVh();
  },
};

vh scss

$vh1: var(--vh, 1vh);

@function sum($numbers...) {
  $sum: 0px;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}
@function vh($num, $other...) {
  @if length($other) > 0 {
    @return calc(#{$vh1} * #{$num} + #{sum($other...)});
  } @else {
    @return calc(#{$vh1} * #{$num});
  }
}

/*
100vh -> vh(100)
calc(100vh - 8px) -> vh(100,-8px)
calc(100vh + 6vw) -> vh(100,6vw)

Notice: 
1. don't has diffrent unit at function vh's 2nd param $other. eg: vh(100, 2px, 6vw)
2. function vh's 2nd param shoud't have vh. eg: vh(100, 4vh)
*/