web-dev-qa-db-ja.com

CSS background-size：カバーがiOSの縦モードで機能しないのはなぜですか？

デバイス間で手動でsplash-imageを設定しようとしています。私はorientation（タッチデバイス）またはscreen width vs. screen height（タッチなし）をチェックし、それに応じてURLを設定することでそうしています。

次に、JavaScriptを介してこのCSSルールを追加します。

 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)

xは、向きと画面サイズに応じて読み込まれる画像です。

私の問題は、これがlandscapeモードで正常に機能することですが、iPadのportraitモードでは、正しい画像がロードされます（縦/横に応じて異なります）が、フルスクリーンサイズに拡張されません。 。

質問：
iOSでポートレートモードのCSS background-sizeを使用できませんか？

手伝ってくれてありがとう！

編集：
試してみたところAndroidスマートフォン。そこでうまく機能します。意味がありません。iPadで機能しないのはなぜですか。

iosbackgroundportraitcss
12
frequent

向きを確認しながら、Appleドキュメント-

起動画像を提供：

iPhoneのみのアプリケーションには、起動イメージを1つだけ含めることができます。 PNG形式で、320 x 480ピクセルのサイズにする必要があります。起動画像ファイルにDefault.pngという名前を付けます。

iPadのみのアプリケーション：サポートされている向きごとに起動画像をPNG形式で作成します。各起動画像は、1024 x 748ピクセル（横向き）または768 x 1004ピクセル（縦向き）である必要があります。

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

Info.plist設定を更新しますUISupportedInterfaceOrientationsおよびUIInterfaceOrientationの値を指定します

そして

すべてのブラウザがbackground-sizeのカバーキーワードを認識しているわけではないため、結果として単に無視します。

そのため、方向に応じてbackground-sizeを100％の幅または高さに設定することでこの制限を克服できます。現在の向きをターゲットにすることができます（デバイス幅を使用してiOSデバイスも同様）。これらの2つの点で、CSSを使用できると思いますbackground-size:cover iOSの縦向きモード

解決策を探しているときに出会ったその他のリソースを次に示します： 柔軟なスケーラブルな背景画像 、 フルスケーラブルな背景画像 、 完璧なスケーラブルな背景画像 、および this ディスカッション。

8
iMeMyself

OK。これがどのように機能するかです（@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; 
    }

したがって、最初に100%に設定し、次にcoverに設定します。この方法では、coverできないすべてのブラウザーが100％の値を取得し、100％を取得できるブラウザーはカバーで上書きされます。

20
frequent

ここにコード

IPadの背景画像を修正する

画像の寸法に応じてサイズを入力するだけです

/* 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;
  }
}
2
comonitos

Designing Websites for iPhone X によると、iOS 11は viewport-fit と呼ばれる既存のviewportメタタグに新しい拡張機能を導入し、はめ込み行動。デフォルト設定はautoで、画面全体をカバーしません。

デフォルトのインセット動作を無効にし、ページを画面のフルサイズにレイアウトするには、次のようにviewport-fitをcoverに設定できます。

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

この設定がないと、スプラッシュスクリーンやフルサイズのヒーロー画像に使用されている既存の手法が、iPhone Xまたはその他の準拠するiOSデバイスで期待どおりに表示されない場合があります。

1
Josh Habdas

私の知る限り、この方法はすべてのIOSデバイスで機能します。他のページ要素（ヘッダーなど）によっては、＆：before psuedo-のz-indexを調整する必要がある場合があります素子。

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;
            }
        }
    }
}
1
Russ Jones