我正在我的网站上工作,我希望它在移动设备上看起来非常简单,基本上只有三个部分,每个部分应该适合窗口宽度和高度
<section style="width: 100%; min-height: 100%"> </section>
它在我的计算机浏览器设备模式下看起来很完美,但是当我在我的手机(iPhone)上打开它时,url bar出现问题,随着我们向下滑动,它会变小.在页面加载时,最小高度适应浏览器高度(包括条形),当条形更改其尺寸时,它不会更改.所以它不再适合屏幕了.我试过这个：
<Meta name="viewport" content="height=device-height">
但是,显然,部分很高.可能我可以在jQuery中做一些解决方法,但我宁愿不这样做.我希望CSS中有一些简单的解决方案.
感谢您的时间.
如果你想看到它：http://kacpergalka.nazwa.pl/_portfolio
解决方法
您可以在最小高度样式中尝试vh(视口高度)单位.
<section style="width: 100%; min-height: 100vh"> </section>
另一种选择是使用calc().
<section style="width: 100%; height: calc(100%);"> </section>
