web-dev-qa-db-ja.com

CordovaアプリがiPhone Xで正しく表示されない（シミュレーター）

昨日、Xcode 9.0（9A235）のiPhone XシミュレーターでCordovaベースのアプリをテストしましたが、見栄えがよくありませんでした。まず、全画面領域を埋める代わりに、アプリコンテンツの上下に黒い領域がありました。さらに悪いことに、アプリのコンテンツと黒の間には2つの白いバーがありました。

cordova-plugin-wkwebview-engineを追加して、Cordovaが（UIWebViewではなく）WKWebViewを使用してレンダリングすると、白いバーが修正されます。 Inapp Purchaseからダウンロードした画像をHTML5キャンバスにロードする際に発生するcordova-plugin-wkwebview-engineを使用すると、パフォーマンスとメモリリークの問題により、アプリがUIWebViewからWKWebViewに移行されません（直接file://アクセスWKWebViewのセキュリティ制限のため、画像データはcordova-plugin-fileを介してロードする必要があるため不可能です。

これらのスクリーンショットは、<body>に青色の背景が設定されたテストアプリを示しています。 UIWebViewの上下に、白いバーが表示されますが、WKWebViewでは表示されません。

両方のCordova Webviewsは、フルスクリーン領域を埋めるネイティブアプリと比較すると、黒い領域を示します。

ioscordovaphonegapiphone-x
107
DaveAlden

私は白いバー ここ の解決策を見つけました：

ビューポートのviewport-fit=coverタグに<meta>を設定します。

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

UIWebViewの白いバーが消えます。

黒い領域を削除するための解決策（下記のコメントの @dpogue で提供されています）は、デフォルトでCordovaで使用されている古い起動イメージを置き換えるために LaunchStoryboard images をcordova-plugin-splashscreenで使用することです。これを行うには、config.xmlのiOSプラットフォームに以下を追加します。

<platform name="ios">    
    <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~comany.png" />   

    <!-- more iOS config... -->
</platform>

それからres/screen/iosに以下の大きさの画像を作成します（既存のものを削除します）：

Default@2x~iphone~anyany.png - 1334x1334
Default@2x~iphone~comany.png - 750x1334
Default@2x~iphone~comcom.png - 1334x750
Default@3x~iphone~anyany.png - 2208x2208
Default@3x~iphone~anycom.png - 2208x1242
Default@3x~iphone~comany.png - 1242x2208
Default@2x~ipad~anyany.png - 2732x2732
Default@2x~ipad~comany.png - 1278x2732

黒いバーが削除されると、対処するiPhone Xについて異なることがもう1つあります。ステータスバーは、「ノッチ」のために20pxよりも大きいため、Cordovaアプリケーションの一番上にあるコンテンツは隠されます。 ：

ピクセル単位でパディングをハードコーディングするのではなく、iOS 11の新しいsafe-area-inset-*定数を使用してCSSでこれを自動的に処理できます。

注： iOS 11.0ではこれらの定数を扱う関数はconstant()と呼ばれていましたが、iOS 11.2ではAppleはenv()（ ここを参照 ）に名前を変更しました。両方を使い、適切なものを適用するために CSS代替機構 を当てにします。

body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

その結果、望み通りの結果が得られます。アプリのコンテンツは全画面をカバーしますが、「ノッチ」によって隠されることはありません。

上記の手順を説明するCordovaテストプロジェクトを作成しました。 webview-test.Zip

ノート：

フッターボタン

  • あなたのアプリに（私のように）フッターボタンがある場合、それらがiPhone Xの仮想ホームボタンと重ならないようにするためにsafe-area-inset-bottomを適用する必要があります。
  • 私の場合、フッターは絶対位置にあるので、これを<body>に適用することはできませんでした。そのため、フッターに直接適用する必要がありました。
.toolbar-footer{
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

cordova-plugin-statusbar

  • ステータスバーのサイズがiPhone Xで変更されたため、古いバージョンのcordova-plugin-statusbarがiPhone Xで誤って表示される
  • Mike Hartington は必要な変更を適用する このプルリクエスト を作成しました。
  • これは[email protected]リリースにマージされたので、少なくともこのバージョンを安全領域インセットに適用するために使用していることを確認してください。

スプラッシュスクリーン

  • LaunchScreenストーリーボードの制約がiOS 11/iPhone Xで変更されました。つまり、既存のバージョンのプラグインを使用すると、起動時にスプラッシュスクリーンが「ジャンプ」するように見えました（ ここを参照 ）。
  • これはバグレポート CB-13505 で修正され、PR cordova-ios＃354 で修正され、 [email protected] で公開されています。 cordova-iosプラットフォームの.

デバイスの向き

  • IOS 11.0でUIWebViewを使用している場合、portrait> landscape> portraitから回転させるとsafe-area-insetが再適用されず、コンテンツが再びノッチで隠れます（以下のコメントの jms で強調表示）。 。
  • アプリを横向きで起動し、縦向きに回転した場合にも発生します
  • cordova-plugin-wkwebview-engine経由でWKWebViewを使用している場合は、これは起こりません。
  • レーダーレポート： http://www.openradar.me/radar?id=5035192880201728
  • 更新 ：これはiOS 11.1で修正されたようです。

参考のために、これは私がこれを捉えた最初のCordova問題です： https://issues.Apache.org/jira/browse/CB-13273

203
DaveAlden

既存のcordovaプロジェクトへの手動修正用

黒いバー

これをinfo.plistファイルに追加してください。起動イメージの修正は別の問題です。つまり iPhoneX起動イメージを追加する方法

<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>

白いバー

メタタグにviewport-fit = coverを設定します。

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
31
coder

あなたがしなければならない3つのステップがあります

iOS 11のステータスバーとiPhone Xのヘッダの問題

1.ビューポートフィットカバー

viewport-fit=coverのビューポートのメタに<header>を追加します

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">

デモ： https://jsfiddle.net/gq5pt509 （index.html）

  1. スプラッシュイメージを追加する config.xml内の<platform name="ios">に

このステップをスキップしないでください 、これは 画面に合わせるために必要です for iPhone X work

<splash src="your_path/Default@2x~ipad~anyany.png" />   <!-- 2732x2732 -->
<splash src="your_path/Default@2x~ipad~comany.png" />   <!-- 1278x2732 -->
<splash src="your_path/Default@2x~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/Default@2x~iphone~comany.png" /> <!-- 750x1334  -->
<splash src="your_path/Default@2x~iphone~comcom.png" /> <!-- 1334x750  -->
<splash src="your_path/Default@3x~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/Default@3x~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/Default@3x~iphone~comany.png" /> <!-- 1242x2208 -->

デモ： https://jsfiddle.net/mmy885q4 （config.xml）

  1. CSSでスタイルを修正する

safe-area-inset-left、safe-area-inset-right、safe-area-inset-top、またはsafe-area-inset-bottomを使用してください

例： （あなたのケースで使用してください！）

#header {
   position: fixed;
   top: 1.25rem; // iOs 10 or lower
   top: constant(safe-area-inset-top); // iOs 11
   top: env(safe-area-inset-top); // iOs 11+ (feature)

   // or use calc()
   top: calc(constant(safe-area-inset-top) + 1rem);
   top: env(constant(safe-area-inset-top) + 1rem);

   // or SCSS calc()
   $nav-height: 1.25rem;
   top: calc(constant(safe-area-inset-top) + #{$nav-height});
   top: calc(env(safe-area-inset-top) + #{$nav-height});
}

ボーナス： deviceready にis-Androidやis-iosのようなボディクラスを追加することができます

var platformId = window.cordova.platformId;
if (platformId) {
   document.body.classList.add('is-' + platformId);
}

だからあなたはCSSでこのようなことをすることができます

.is-ios #header {
 // Properties
}
11
l2aelba

各スプラッシュスクリーンが自動生成またはストーリーボード形式ではなく個別に設計されていた場合は、私のLegacy Launchスクリーン設定をそのまま使用し、iPhoneX 1125×2436の向きをconfig.xmlに追加する必要がありました。そのようです：

<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />

これらをconfig.xmlに追加した後（ "viewport-fit = cover"は既にindex.hmlに設定されています）、Ionic Proを使用して構築された私のアプリはiPhoneXデバイスの画面全体を埋めます。

4
TaeKwonJoe

安全領域のマージンに使用するconstantキーワードが11.2 beta +でenvに更新されました。

https://webkit.org/blog/7929/designing-websites-for-iphone-x/ /

2
Brent

新しいバージョンのionicをグローバルにインストールするならば、あなたはionic cordova resourcesを実行することができます、そしてそれは正しいサイズと共にあなたのためにすべてのスプラッシュスクリーンイメージを生成するでしょう。

1
nebulr

iPhone X/XSの画面回転問題を修正しました

IPhone X/XSでは、safe-area-inset- *の計算がUIの更新に間に合うように新しい値を反映していなかったため、画面を回転させてもヘッダーバーの高さに誤った値が使用されます。このバグは最新のiOS 12でもUIWebViewに存在します。回避策は1pxの上マージンを挿入してからすぐに元に戻すことです。これによりsafe-area-inset- *が直ちに再計算されるようになります。やや醜い修正ですが、それはあなたが何らかの理由でUIWebViewを使い続けなければならない場合にうまくいきます。

window.addEventListener("orientationchange", function() {
    var originalMarginTop = document.body.style.marginTop;
    document.body.style.marginTop = "1px";
    setTimeout(function () {
        document.body.style.marginTop = originalMarginTop;
    }, 100);
}, false);

このコードの目的は、document.body.style.marginTopをわずかに変更してから元に戻すことです。必ずしも「1px」である必要はありません。あなたはあなたのUIをちらつかせないがその目的を達成するような値を選ぶことができます。

0
YYL