iOS Safari 中设备旋转后页面底部的空白
kaz*_*nov 16 html css safari ios
我有一个带有元标记的网站
<meta name="viewport" content="width=device-width, initial-scale=1.0">
而height:100%;在html和body标签。
当我从 Safari (iOS 13.5.1) 访问此站点并执行以下操作时：
- 将我的设备旋转到横向模式
- 然后将其旋转回纵向模式
然后屏幕底部会出现一个空白区域。这个空间不是页面html代码的一部分。它在html标签之外。
最小可重现示例：https : //jsbin.com/cojabiquza
这似乎与 Safari 在设备进入横向模式时隐藏地址面板和底部面板时的行为有关。当它返回到纵向模式时，面板再次显示，但浏览器“忘记”重新计算某些内容并在页面底部显示额外的空间。
删除<meta name="viewport"...修复它。但我无法摆脱它，因为我有一个响应式网站。在其他浏览器中它运行良好。
如果您知道如何解决，请分享您的经验。
kaz*_*nov 11
@Jax-p 回答
对我描述的错误有效，但它会导致另一个问题。使用时100vh内容开始隐藏在地址栏后面：
所以在我现实生活中的应用程序中，我最终得到了一些技巧：
document.addEventListener('orientationchange', () => {
document.documentElement.style.height = `initial`;
setTimeout(() => {
document.documentElement.style.height = `100%`;
setTimeout(() => {
// this line prevents the content
// from hiding behind the address bar
window.scrollTo(0, 1);
}, 500);
}, 500);
});
这个 hack 或多或少地解决了 iOS Safari 12 和 13 中的问题
- 对于 iOS，您必须使用 WINDOW.addEventListener('orientationchange'...而不是 DOCUMENT.addEventListener... (2认同)
lei*_*oia 10
在花了一天的大部分时间（再次）处理这个“功能”之后，我为 iPad、iPhone 上的 iOS 14.4 创建了一个纯 CSS 解决方案，并且可以在所有常规浏览器上正常工作。无需黑客攻击。秘诀是在 HTML 和 BODY 元素上使用 100vh，同时position:fixed在最外面的包装元素上使用，并将所有边缘钳位为零。
注意：如果您的 BODY 背景与包装背景有任何不同，则旋转屏幕时会出现视觉伪影。同样的问题还允许您通过有目的地为 BODY 提供不同的背景颜色（可选）来为顶部的地址栏着色。
HTML, BODY {
height: 100%;
width: 100%;
height: 100vh;
width: 100vw;
margin:0;
padding:0;
/* required to prevent rogue scrollbars */
overflow: hidden;
/* cosmetic stuff: */
background-color:#5AE;
}
#wrapper {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
padding:0;
margin:0;
/* if you want the content to scroll normally: */
overflow: auto;
/* cosmetic stuff: */
background-color:#AEA;
border: #6B6 1em solid;
box-sizing:border-box;
}<html>
<head>
<meta name="viewport" content="height=device-height, initial-scale=1, width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
Content goes here.
</div>
</body>
</html>当您滚动时（或者在某些情况下，当您从纵向更改为横向时），移动浏览器通常会隐藏其地址栏和控制菜单。使用时可能会导致一些问题height: 100%;，因为有时浏览器不会以正确的方式重新计算百分比值（它不会对地址栏高度求和）。
如果您想填充 100% 的视口高度，则应使用height: 100vh;(vh = 视口高度)。我希望它有帮助。
| 归档时间： |
|
| 查看次数： |
7125 次 |
| 最近记录： |