iOS上でCSSの背景サイズ：カバーがポートレートモードで動作しないのはなぜですか？

Question

私はデバイス間で手作業でsplash-imageを設定しようとしています。私はorientation（タッチデバイス）またはscreen width vs. screen height（タッチなし）をチェックし、それに応じてURLを設定することでそうしています。 xはオリエンテーション、画面サイズに応じてロードされるイメージされた状態で

document.styleSheets[3].insertRule('.initHandler:before { 
    background: url('+x+') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }', 0) 

：

その後、私はJavaScriptで、このCSSルールを追加します。

私の問題はlandscapeモードでは問題なく動作しますが、portraitモードのiPadでは、正しい画像が読み込まれます（縦横比によって異なります）。フルスクリーンサイズには拡大されません。

質問：
私はポートレートモードでのiOS上のCSS background-sizeを使用することができませんか？

ありがとうございました！

編集：
Androidスマートフォンで試したところです。そこでうまく動作します。なぜそれがiPad上で動作しない、意味をなさない。向きを確認しながら

Answer 1

リンゴの文書からこれらの点に注意をしてください -

を起動画像の提供：

iPhone専用アプリケーションは一つだけの起動イメージを持つことができます。それはPNG形式で、320 x 480ピクセルを測定する必要があります。起動イメージの名前を Default.pngとします。

iPad専用アプリケーション： PNG形式でサポートされている向きごとに起動イメージを作成します。各起動イメージは、1024 x 748 ピクセル（ランドスケープ用）または768 x 1004ピクセル（ポートレート用）でなければなりません。

ユニバーサルアプリケーション： iPhoneとiPadの両方の起動イメージを含めます。

はあなたのInfo.plist設定を更新 UISupportedInterfaceOrientationsの値とUIInterfaceOrientation

と

すべてのブラウザがバックグラウンドサイズためのカバーのキーワードを認識し、その結果として未を指定します単にそれを無視してください。

だから私たちはオリエンテーションに応じて、100％の幅や高さにバックグラウンド・サイズを設定することにより、その限界を克服することができます。現在の方向付け（iOSデバイスとデバイス幅を使用）をターゲットに設定できます。Flexible scalable background images、full scalable background images、perfect scalable background images、およびthis議論：これら二つの点で、私はあなたがここではいくつかの他の解決策を探している間、私も出会った資源があるポートレートモード

にiOSの上でCSS background-size:coverを使用することができると思います。

Answer 2

ここでは、（@iMeMyselfのおかげで）働いている方法です：

body { 
    background: url(...) no-repeat center center fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    } 

だから、まずcoverに、100%に設定します。この方法では、coverが100％の価値を得ることができないすべてのブラウザが、100％の価値を得ることができるのは、カバーで上書きされます。

Answer 3

コードここ

それは私の知る限り承知しているように、この方法は、すべての作品だけ

/* Page background-image landscape for iPad 3 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    .introduction-section { 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    } 
} 
/* Page background-image portrait for iPad 3 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    .introduction-section { 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    } 
} 
/* Page background-image landscape for iPad 1/2 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .introduction-section { 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    } 
} 
/* Page background-image portrait for iPad 1/2 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .introduction-section { 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    -webkit-background-size: 5024px 2024px !important; 
    background-size: 5024px 2024px !important; 
    } 
} 

Answer 4

自分のイメージdimentionsに応じてサイズを入力ipadの

のための背景画像を固定IOSデバイス。あなたの他のページ要素（ヘッダーなど）によっては、&のz-indexを調整する必要があります：psuedo-elementの前に。

html { 
    height:100% !important; 
} 

body { 
    height:100%; 
    min-height:100%; 
    overflow-x:hidden; 
    overflow-y:auto; 
    // use your own class here // 
    &.body-class { 
     // @screen-xs-max is a Bootstrap3 variable name // 
     @media screen and (max-width:@screen-xs-max) { 
      min-height:100vh; 
      position:relative; 
      &:before { 
       position:fixed; 
       top:0; 
       left:0; 
       right:0; 
       bottom:0; 
       display:block; 
       content:""; 
       z-index:-1; 
       background-image:url(background-image.jpg); 
       background-position:center; 
       background-size:cover; 
       // Add this unless you compile your LESS using a preprocessor which adds vendor prefixes // 
       -webkit-background-size:cover; 
      } 
     } 
    } 
} 

Answer 5

iOSの11 Designing Websites for iPhone Xによるとinsettingの動作を制御しますviewport-fitという既存のviewportメタタグのための新しい拡張機能を導入しています。デフォルトの設定はautoで、画面全体をカバーしません。

デフォルトのインセットの動作を無効にして、ページが画面のフルサイズにレイアウトする原因となり、ここに示したように、あなたがcoverにviewport-fitを設定することができますするために：

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 

使用この設定を既存の技術がなければスプラッシュ画面やフルサイズのヒーロー画像は、iPhone Xや他のiOS対応デバイスでは期待通りに表示されないことがあります。