横向可用屏幕高度问题-iOs Safari

Question

我正在工作的网站需要一些帮助。 Android上的人像模式如下：

现在，风景，没有CSS更改：

没问题。请跟随我看下一个屏幕截图，该屏幕截图说明在纵向模式下在iOs Safari / Chrome上会发生什么。一切正常：

因为它是SE，所以风景模式进入“全屏”状态，因此我认为屏幕很小，进入全屏状态，看起来还是不错的。

我可以滚动浏览内容没问题。但是，当我单击链接转到另一个页面时，会发生这种情况：

页面的行为非常简单：可滚动内容位于div内，该div是四舍五入的div，在滚动过程中不得移动。发生的情况是，将舍入的div设置为屏幕高度的100％，并且当iO上出现顶部和底部导航栏时，舍入的div不会更改其高度以适应可用的屏幕部分。

body CSS如下：

body {
margin: 0; 
height: 100%; 
overflow: hidden; 
-webkit-text-size-adjust: 100%; }

圆角div的管理方式如下：

.rcorners {
position: absolute;
margin-top:15px;
margin-bottom:15px;
margin-left:15px;
margin-right:15px;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%-20px;
height: 100%-20px;
background-color: white;
border-radius: 10px;
-moz-box-shadow: 0 0 6px 2px #C0C0C0;
-webkit-box-shadow: 0 0 6px 2px #C0C0C0;
box-shadow: 0 0 6px 2px #C0C0C0;
overflow:hidden; }

关于每次可用屏幕尺寸更改时如何正确调整高度的任何想法？

谢谢

Answer 1

因此，可悲的是，iOS多年来一直以这种类型的东西而臭名昭著。首先是顶部的地址栏，现在是浏览器菜单。因此，您有两种选择。您可以为景观设置媒体查询，并缩短该容器的高度，并在需要时滚动它。也可能会降低字体大小。或者本文中有几个选项可能会有所帮助。

您也可以尝试100vh。这样一来，它就会变成可用视口的全部高度，有时我会按照我需要的方式以100％的高度进行操作。

https://www.eventbrite.com/engineering/mobile-safari-why/