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

121

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

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

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


（ソース：pbrd.co）


（ソース：pbrd.co）

全画面領域を埋めるネイティブアプリと比較すると、両方のCordova Webviewは黒い領域を示します。

ios  cordova  phonegap  iphone-x 
— デイブオールデン
ソース
wkwebviewで興味深い。私のゲームでは、全幅ではなく、中心からのオフセットもありました。uiwebviewではサイズは同じですが、少なくとも中央に配置されます。
— agmcleod 2017年
私もこの問題を抱えていたので、CSSだけでいくつかの回避策を作成しましたpt.stackoverflow.com/a/263460/55076を
— Igor Trindade
私もこの問題を抱えています。<meta>以下にリストされている他のものが機能していないので、コードをCordova index.hmlファイルに追加するだけです。Cordova-ios 4.5.4でCordova 7xを実行しています-他に必要なことはありますか？
— rolinger

回答:

245

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

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

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

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

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

<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つの点が異なります。「ノッチ」があるため、ステータスバーは20ピクセルよりも大きくなります。つまり、コルドバアプリの最上部にあるコンテンツはすべて隠されます。 ：

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

注： iOS 11.0ではこれらの定数を処理する関数が呼び出されましたconstant()が、iOS 11.2ではAppleが名前を変更しましたenv()（ここを参照）。したがって、両方のケースをカバーするには、CSSルールを両方でオーバーロードし、CSSフォールバックメカニズムに依存してCSSを適用する必要があります適切なもの：

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

結果は希望どおりになります。アプリのコンテンツは全画面をカバーしますが、「ノッチ」によって不明瞭になりません。

上記の手順を示すCordovaテストプロジェクトを作成しました：webview-test.zip

ノート：

フッターボタン

  • アプリにフッターボタンがある場合（私のものと同じ）、safe-area-inset-bottomiPhone Xの仮想ホームボタンと重複しないように適用する必要もあります。
  • 私の場合、<body>フッターが完全に配置されているため、これを適用できなかったため、フッターに直接適用する必要がありました。

.toolbar-footer{
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

コルドバプラグインステータスバー

  • iPhone Xではステータスバーのサイズが変更されたため、古いバージョンのcordova-plugin-statusbarディスプレイはiPhone Xでは正しく表示されません
  • Mike Hartingtonは、必要な変更を適用するこのプルリクエストを作成しました。
  • これはcordova-plugin-statusbar@2.3.0リリースに統合されたので、safe-area-insetsに適用するために少なくともこのバージョンを使用していることを確認してください

スプラッシュスクリーン

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

デバイスの向き

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

参考までに、これは私が開いた元のCordovaの問題で、これをキャプチャしています：https : //issues.apache.org/jira/browse/CB-13273

— デイブオールデン
ソース
3
画面を回転させても問題はありませんか？私は試しましたが、画面を回転した後、すべてが壊れます（safe-area-inset- *は、デバイスの向きに応じて値を更新しません。また、縦向きを回転->横向き->縦向きにすると、初期値も壊れます）。アップル/サファリブラウザの問題かもしれませんか？
— Juan Miguel S.
1
私の場合、viewport-fit=coverアプリ全体を追加すると、空白の白い画面しか表示されず、他には何も表示されません。iPhone7 PlusではiOS11、Xcode9を使用しています。同様の行動を経験している人はいますか？
— Dimitri
1
@DaveAlden-11.2 beta + constantでenvキーワードのために削除されたようです-参照：webkit.org/blog/7929/designing-websites-for-iphone-x
— Brent
1
アプリのbody cssコードをどこに配置しますか？どのファイルが好きですか？何が私のために動作しない、私はイオン性3.使用しています
— ディミトリ
2
ローテーションの問題に関する更新はありますか？iOS 12を使用していますが、同じ問題が発生しています。この問題が解決しないことは奇妙に見えます。/ cc @jms
— a--m
36

既存の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">
— コーダー
ソース
ありがとう！.plistの変更は、選択した回答からの変更と同じ効果がありますが、高速です。
— 2Fwebd 2017
これらの各タスクはCSSピクセルの高さと幅に対して何をしますか？アプリの上部に一連の狭いdiv（メニューなど）があり、最後のDIVが画面の残りの部分を埋めるように残りのピクセルの高さを計算します。現在、下部の白いバーがそのDIVの一部を覆っているのがわかりますが、すべてを伝えることはできません。つまり、DIVがまだ画面の下部に表示されていないことを示しています。そして今度は、私のアプリは上部の白いバーの下から始まるので、上部のスペースを使用することすらありません。
— rolinger
私が使用しUILaunchStoryboardName、それは何とか黒いバーを削除しました。しかし、スプラッシュ画面が拡大されます。なぜですか？承認された回答が機能しません
— Huiting
@coderありがとうございます。ただし、UILaunchStoryboardNameをplistに追加すると、App Storeに送信できなくなります。 Info.plistで。」
— マットロバーツ
@Huitingあなたのケースについて何か解決策を見つけましたか？
— LMaker
16

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

for 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">

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

<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});
}

ボーナス：あなたが好きなボディクラスを追加することができますis-androidかis-iosにdeviceready

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

CSSでこのようなことをすることができます

.is-ios #header {
 // Properties
}
— l2aelba
ソース
5

各スプラッシュ画面が自動生成またはストーリーボード形式でレイアウトされるのではなく個別に設計された私の場合、レガシー起動画面の構成に固執し、縦長および横長の画像をターゲット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デバイスの画面全体に表示されます。

— テコンジョー
ソース
サー、しかし私のconfig.xmlにはすでにこの行とviewport-fit = coverの上に追加しています
— Kapil soni
@Kapilsoniの場合は、Cordova UIWebView、WKWebView、SplashScreenプラグイン、またはこれらの構成の組み合わせに問題がある可能性があります。また、ビルドでXCode 10または11をターゲットにしていますか？
— TaeKwonJ​​oe
XCode 10をターゲットにしていますか？
— Kapil soni
2

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のちらつ​​きを引き起こさないが、その目的を達成する値を選択できます。

— YYL
ソース
iOS8でUIWebViewが廃止されました...既存のバグのいずれかが修正されるかどうかは疑問です。アプリのアップロード時にAppleは警告を発しますが、これは間もなく廃止されます...したがって、苦労してWKWebViewに移行する時が来ました...
— Mozfet
2

Cordovaアプリを2年間開発しており、関連する問題を解決するために何週間も費やしました（例：キーボードが開いているときのWebViewスクロール）。これは、iOSとAndroidの両方のテスト済みで実証済みのソリューションです

PS：コンテンツのスクロールにiScrollを使用しています

  1. index.htmlのメタタグでviewport-fit = coverを使用しないでください。アプリをステータスバーに近づけないでください。iOSはすべてのiPhoneバリアントの適切な領域を処理します。
  2. XCodeで、ステータスバーの非表示をオフにし、全画面が必要です。また、起動画面ファイルをCDVLaunchScreenとして選択することを忘れないでください。
  3. config.xmlでフルスクリーンをfalseに設定します
  4. 最後に、（素晴らしいプラグインを提供してくれたEddy Verbruggenに感謝）ステータスバーと下部領域の背景色を設定するために彼のプラグインcordova-plugin-webviewcolorを追加します。このプラグインを使用すると、任意の色を設定できます。

  5. 以下をconfig.xmlに追加します（xが不透明度の後の最初のff）

    <preference name="BackgroundColor" value="0xff088c90" />

  6. 入力要素にフォーカスイベントを追加して、自分のスクロール位置を処理します

    iscrollObj.scrollToElement(elm, transitionduration ... etc)

アンドロイドのために、同じことを行うが、代わりにコルドバ-プラグインwebviewcolor、インストールコルドバ-プラグイン-ステータスバーとコルドバ・プラグインnavigationbar色を

これらのプラグインを使用してiOSとAndroidの両方で機能するJavaScriptコードは次のとおりです。

function setStatusColor(colorCode) {
    //colorCode is smtg like '#427309';
    if (cordova.platformId == 'android') {
        StatusBar.backgroundColorByHexString(colorCode);
        NavigationBar.backgroundColorByHexString(colorCode);
    } else if (cordova.platformId == 'ios') {
        window.plugins.webviewcolor.change(colorCode);
    }
}
— グダルカン
ソース
1

新しいバージョンのionicグローバルをインストールするionic cordova resourcesと、実行でき 、すべてのスプラッシュスクリーン画像と正しいサイズが生成されます。

— 星雲
ソース
-1

この記事に注意してください：https : //medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcdは上記とCordovaとはサイズが異なりますプラグインページ：

Default@2x~iphone~anyany.png (= 1334x1334 = 667x667@2x)
Default@2x~iphone~comany.png (= 750x1334 = 375x667@2x)
Default@2x~iphone~comcom.png (= 750x750 = 375x375@2x)
Default@3x~iphone~anyany.png (= 2436x2436 = 812x812@3x)
Default@3x~iphone~anycom.png (= 2436x1242 = 812x414@3x)
Default@3x~iphone~comany.png (= 1242x2436 = 414x812@3x)
Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366@2x)
Default@2x~ipad~comany.png (= 1278x2732 = 639x1366@2x)

上記のように画像のサイズを変更し、iosプラットフォームを更新cordova-plugin-splashscreenし、2番目の問題が修正された後、最新の画面とフラッシュから白い画面に変更しました。ただし、最初のspash画像の下部に白い境界線が表示されます。

— msmfsd
ソース
1
シミュレーターの起動時にiPhone XをDefault@3x~iphone~comany.png - 1242x2436画像で確認できます
— msmfsd '24年
注目すべきことに、iPhone Xの適切な寸法は次のとおりです...縦：1125px×2436px ...横：2436px×1125px
— Sterling Bourne
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.