web-dev-qa-db-ja.com

iPhone XでのWKWebViewページの高さの問題

WKWebViewを

viewport-fit=cover

そして

body :{height:100%}

hTMLボディの高さはまだiPhone Xの下部に到達できず、safeAreaの高さと同じですが、背景色で全画面を覆うことができます。

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

このページをフルスクリーンのWKWebViewにロードして、問題を再現します。

ioscssios11wkwebviewiphone-x
9
WATER1350

（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 および its parameter values および kudos to @dpogue のドキュメントは、私が解決策を見つけた答えを示しています。

14
Sampo

CSSでhtml要素の高さをheight: 100vh（height: 100%ではなく）に設定したことがわかりました

2
Adam Heath

あなたのコードで、あなたが追加した場合

opacity: 0.5;

htmlタグとbodyタグを見ると、bodyタグは全画面表示になっていますが、htmlタグの高さは安全領域と同じ高さしかありません。

Html領域を端に到達させるだけの場合は、明示的に設定できます。

<html style='height: 812px;'>

これにより、次の項目も追加する限り、HTML内のコンテンツが全画面に適切に表示されます。

<meta name="viewport" content="initial-scale=1.0, viewport-fit=cover">

もちろん、最もエレガントなソリューションではありませんが、機能します。

1
Samantha John

Cordovaアプリでこの問題を見つけました。

サマンサのソリューションは私にとってある程度うまくいきましたが、htmlタグに812pxの高さを設定すると、横向きや他のデバイスで問題が発生しました。最終的に私は、横長と縦長の両方のcssメディアクエリでiPhone Xサイズの画面のみをターゲットにするとうまくいくことがわかりました。

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;
        }     
    }
0
Michael Sibley