
查了一下這在 safari 是一個一直存在的問題,後來連手機的 chrome 也會有這樣的情況,還好後來有找到方法試了一下有用就紀錄一下。
css 要改這樣
.my-element { height: 100vh; /* Fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100); }
再加一段 js 去判斷要調整的高度。
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit let vh = window.innerHeight * 0.01; // Then we set the value in the --vh custom property to the root of the document document.documentElement.style.setProperty('--vh', `${vh}px`);
有興趣研究原理的話可以看這篇:
The trick to viewport units on mobile
0 意見:
張貼留言