Question

我正在我的网站上工作，我希望它在移动设备上看起来非常简单，基本上只有三个部分，每个部分应该适合窗口宽度和高度

<section style="width: 100%; min-height: 100%">

</section>

在我的计算机浏览器中，它在设备模式下看起来很完美，但是当我在我的手机（iPhone）上打开它时，url bar出现问题，随着我们向下滑动，它会变小。在页面加载时，min-height适应浏览器高度（包括条形），并且当条形图改变其尺寸时它不会改变。所以它不再适合屏幕了。我试过这个：

<meta name="viewport" content="height=device-height">

然而，显然，部分很高。可能我可以在jQuery中做一些解决方法，但我不愿意。我希望CSS中有一些简单的解决方案。感谢您的时间。如果您想要直播：http://kacpergalka.nazwa.pl/_portfolio

Answer 1

您可以在最小高度样式中尝试vh（视口高度）单位。

<section style="width: 100%; min-height: 100vh">

</section>

另一种选择是使用calc()。

<section style="width: 100%; height: calc(100%);">

</section>

Answer 2

这并不像人们想象的那么容易。

以下是The trick to viewport units on mobile的摘录：

要点：大众单位应考虑滚动条吗？网站的导航或页面控件如何处理-这些应该计入计算中吗？然后是设备本身的物理属性（您好，缺口！），这些属性不容忽视。

然后解决方案提出：

.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`);
});

Answer 3

您可以尝试比例元标记：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

使用CSS在移动浏览器上高度100％

3 个答案: