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

Question

在我正在开发的网站上需要一些帮助。Android 上的纵向模式如下所示：

现在，风景，没有 css 变化：

没有任何问题。跟我来看看下一个屏幕截图，说明 iOs Safari/Chrome 在纵向模式下会发生什么。一切都很好：

横向模式进入“全屏”，因为它是 SE，所以我认为屏幕很小，进入全屏状态，看起来仍然很好。

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

页面的行为非常简单：可滚动内容位于 div 内，该 div 是圆形的，在滚动期间不得移动。发生的情况是，圆形 div 设置为屏幕的 100% 高度，当顶部和底部导航栏出现在 iO 上时，圆形 div 不会改变其高度以适应可用的屏幕部分。

正文 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; }

每次可用屏幕尺寸发生变化时如何使高度正确的任何想法？

谢谢

标签： htmlcssiossafari

Answer 1

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

您也可以尝试 100vh。因为这将使它成为可用视口的完整高度，我有时会看到它以我需要的方式与 100% 高度相比。

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