13

デバイス間でマニュアルを設定しようとしてい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がモードで正常に機能することですが、モードの iPadportraitでは、正しい画像が読み込まれます (ポートレート/ランドスケープによって異なります) が、フルスクリーン サイズに拡大されません。

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

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

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

4

5 に答える 5

21

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ます。このように、100% 値を取得できないブラウザはすべてcover、100% 値を取得できるブラウザはカバーで上書きされます。

于 2012-10-04T19:44:20.313 に答える
8

向きを確認する際は、アップルのドキュメントから次の点に注意してください -

起動イメージの提供:

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 デバイスと同様に) をターゲットにすることができます。background-size:coverこの2点で、iOSの縦長モードでCSSを使えると思います

解決策を探しているときに見つけたその他のリソースを次に示します:柔軟でスケーラブルな背景画像、 完全にスケーラブルな背景画像、完全にスケーラブルな背景画像、およびこのディスカッション。

于 2012-09-26T12:56:01.970 に答える
2

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

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

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

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

于 2017-10-04T17:36:40.790 に答える
1

私の知る限り、この方法はすべての IOS デバイスで機能します。他のページ要素 (ヘッダーなど) によっては、&:before 疑似要素の 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;
            }
        }
    }
}
于 2016-11-02T12:09:23.930 に答える