iPhone X上WKWebView页面高度问题

Question

iPhone X上WKWebView页面高度问题

13

我发现如果我使用 WKWebView 与

viewport-fit=cover

并且。

body :{height:100%}

HTML页面的高度仍无法达到iPhone X底部，与安全区域的高度相等。然而，背景颜色可以覆盖全屏。

https://ue.qzone.qq.com/touch/proj-qzone-app/test.html

我在全屏WKWebView中加载此页面以重现问题。

- WATER1350

更糟糕的是，window.innerHeight的值是不正确的，而这种情况在UIWebView上并不会发生。 - WATER1350

1

这不仅影响iPhone X，而且影响任何其他iOS 11设备，因为它们都有与状态栏高度相对应的safe-area-inset-top。因此，在任何iOS 11设备上，您都会在底部获得20像素的间隙。这在iOS 10中不是问题。 - Sampo

2

此外，如果您将屏幕旋转到横向然后再切换回来，它可以解决这个问题。似乎浏览器在计算html/body高度之前还没有应用 viewport-fit=cover 或其他一些东西。 - Sampo

5个回答

12

我发现在CSS中将html元素的高度设置为height: 100vh（而不是height: 100%）起作用。

- Adam Heath

1

哇，这解决了我的问题！我将body的位置设置为fixed并使用overflow hidden（100vh和100vw）来防止橡皮筋效应，同时将100vh添加到html元素中也解决了它。谢谢！ - Nichlas Wærnes Andersen

1

在你的代码中，如果你添加 opacity: 0.5; 到 html 和 body 标签中，你会发现 body 标签占据整个屏幕，而 html 标签的高度只有安全区域那么高。

如果你只想让 html 区域达到边缘，你可以显式地设置：<html style='height: 812px;'>。只要你还添加了 <meta name="viewport" content="initial-scale=1.0, viewport-fit=cover">，这将使 html 内容适合整个屏幕。

当然，这并不是最优雅的解决方案，但它确实有效。

- Samantha John

不，我已经添加了viewport-fit，但是当我在全屏WKWebView中加载页面时，window.innerHeight的值仍然不正确，您可以尝试加载页面https://ue.qzone.qq.com/touch/proj-qzone-app/test.html。 - WATER1350

我编辑了我的答案并进行了修复。这个方法有点取巧，但如果你只需要全屏，它会起作用。 - Samantha John

0

我在我的 Cordova 应用程序中遇到了这个问题。

Samantha 的解决方案在某种程度上对我有用，但在横向和其他设备上设置为 812px 的 html 标签高度会导致问题。最终，我发现仅针对 iPhone X 大小的屏幕使用 css 媒体查询来处理横向和纵向问题是行之有效的。

必须将宽度和高度像素值声明为重要，以便 iPhone 接受它们。

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : portrait) { 
        html {
            height: 812px !important;
            width: 375px !important;  
        }
    }

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : landscape) { 
        html {
            width: 812px !important;
            height: 375px !important;
        }     
    }

- Michael Sibley

0

您需要为您的 Web 视图设置 UIEdgeInsets，以使其延伸到底部（覆盖刘海区）。

您可以通过创建 WKWebView 的子类来实现这一点！

请查看this。

- Rahul Joshi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampo · Accepted Answer

我已经修复了（ObjC / Swift）的问题:

if (@available(iOS 11.0, *)) {
  webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}

或者

if #available(iOS 11.0, *) {
    webView.scrollView.contentInsetAdjustmentBehavior = .never;
}

这个设置似乎与viewport-fit=cover具有相同的效果，因此如果您知道您的内容正在使用该属性，则可以通过这种方式修复错误。

env(safe-area-inset-top) CSS 声明仍按预期工作。WKWebView 自动检测其视口是否与被阻止的区域相交，并相应地设置值。

contentInsetAdjustmentBehavior和其参数值的文档，感谢@dpogue提供了答案，我在那里找到了解决方案。