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

【问题标题】：Problem with usable screen height in landscape - iOs Safari横向可用屏幕高度的问题 - iOs Safari
【发布时间】：2020-08-17 02:42:23
【问题描述】：

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

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

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

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

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

页面的行为非常简单：可滚动内容位于 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; }

关于如何在每次可用屏幕尺寸发生变化时调整高度的任何想法？

谢谢

【问题讨论】：

标签： html css ios safari

【解决方案1】：

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

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

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

【讨论】：

感谢您的及时答复！我应该指定我想保持与纵向模式相同的行为。不幸的是，给 100vh 一个节目无济于事:( 页面仍然具有我之前展示的相同外观。缩短容器会使这看起来很奇怪，特别是因为在 XS Max 等其他 iPhone 上只有一个顶部导航bar 而在 Android 上，我的容器会比全高短。我会得到不一致的结果。在 SE 上它可能看起来不错，而在 XS Max 和 Android 上它看起来很糟糕。我缺少什么吗？
您完全没有遗漏任何东西。我在 iOS 上遇到过一些类似的问题，有时在 android 上也遇到过。这些可能会有所帮助。我只会通过媒体查询变得更加有限，并以 SE 的确切分辨率为目标，使其看起来正确，同时不影响其他操作系统或尺寸 stephen.io/mediaqueries/iphonex 网络是一种非常流动的媒体，虽然我很想做点什么知道它会在所有设备上完美响应一组 CSS，这不是现实。所以在像你这样的情况下，我只是设置了一个非常具体的媒体查询。
问题是，我需要将横向视图保持一致的可用高度，就像在纵向模式下发生的那样。我的意思是：始终可见的顶部和底部导航栏或始终“全屏”。据我了解，在我的情况下，Safari 在横向视图（不考虑导航栏）时会使用 100%（即使使用 100vh）高度，因此在从纵向进入横向模式时是正确的视图。
好的，刚刚检查了您的第二条评论，但仍有问题。横向视图中的可用高度在 SE 上不断变化。如果我从纵向转到横向，它将变为全屏，然后如果我单击一个链接，就会出现那些令人讨厌的条，使每个“正确”的高度设置都无用。我知道我的情况很奇怪，至少可以说是奇特的，因为我没有通过使用这种特殊的显示内容方式走任何经典路线。无论如何，很抱歉打扰您。
无论如何你都不是麻烦。遗憾的是，我手头没有 SE，尤其是全新的 SE，所以我无法复制可悲的情况。如果需要很长时间才能变得完美，我通常会做出牺牲，让它在该设备上可用。