我正在我的网站上工作,我希望它在移动设备上看起来非常简单,基本上只有三个部分,每个部分都应该适合窗口的宽度和高度
<section style="width: 100%; min-height: 100%">
</section>
它在我的计算机浏览器的设备模式下看起来很完美,但是当我在我的手机 (iPhone) 上打开它时,url 栏出现问题,随着我们向下滑动,它变小了。在页面加载时,最小高度适应浏览器高度,包括栏,并且当栏改变它的尺寸时它不会改变。所以它不再适合屏幕。我试过这个:
<meta name="viewport" content="height=device-height">
但是,很明显,部分太高了。也许我可以在 jQuery 中做一些解决方法,但我宁愿不这样做。我希望 CSS 中有一些简单的解决方案。 感谢您的宝贵时间。
最佳答案
这并不像人们想象的那么容易。
以下是来自 The trick to viewport units on mobile 的一些摘录:
Case in point: should the scrollbar be taken into account for the vw unit? What about a site's navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can't be overlooked.
然后解决方案提出:
.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`);
还有一些 JS:
// We listen to the resize event
window.addEventListener('resize', () => {
// We execute the same script as before
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
关于html - 使用 CSS 在移动浏览器上 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29697883/