Warum funktioniert CSS background-size: cover nicht im Hochformat auf iOS?

Question

Ich versuche ein manuelles splash-image über Geräte einzurichten. Ich tue dies, indem ich nach orientation (Touch-Geräte) oder screen width vs. screen height (keine Berührung) suche und eine URL entspreche.

Dann füge ich diese CSS-Regel via Javascript:

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) 

Mit x wobei das Bild je nach Ausrichtung und Bildschirmgröße geladen werden.

Mein Problem ist das funktioniert in landscape Modus, aber auf meinem iPad in portrait Modus, das richtige Bild geladen wird (unterscheiden sich je nach Hoch/Querformat), aber es ist nicht auf Vollbildgröße erweitert.

Frage:
Kann ich nicht CSS background-size auf iOS im Portrait-Modus verwenden?

Vielen Dank für Ihre Hilfe!

EDIT:
Nur auf meinem Android Smartphone versucht. Funktioniert dort gut. Macht keinen Sinn, warum es auf dem iPad nicht funktioniert.

Answer 1

Während Orientierung Überprüfung bitte beachten Sie diese Punkte aus dem Dokument Apfel -

Einführung Bilder liefern:

iPhone-Anwendungen nur nur ein Startbild haben kann. Es sollte im PNG-Format sein und 320 x 480 Pixel messen. Benennen Sie Ihr Startbild file Default.png.

Nur iPad-Anwendungen: Erstellen Sie ein Startbild für jede unterstützte Ausrichtung im PNG-Format. Jedes Startbild muss 1024 x 748 Pixel (für Querformat) oder 768 x 1004 Pixel (für Hochformat) aufweisen.

Universelle Anwendungen: Fügen Sie Startbilder für iPhone und iPad hinzu.

Aktualisiere dein Info.plist-Einstellungen Geben Sie Werte für die UISupportedInterfaceOrientations und UIInterfaceOrientation

und

Nicht alle Browser erkennen die Abdeckung Schlüsselwort für Hintergrund-Größe, und als Ergebnis ignoriere es einfach.

So können wir diese Begrenzung durch überwinden, um die Hintergrundgröße auf 100% Breite oder Höhe einstellen, je nach Orientierung. Wir können die aktuelle Ausrichtung (wie auch das iOS-Gerät mit Gerätebreite) ausrichten.Mit diesen zwei Punkten denke ich, Sie CSS background-size:cover auf iOS im Portrait-Modus

Hier sind einige andere Ressourcen nutzen, können auch über kam ich während Suche nach einer Lösung: Flexible scalable background images, full scalable background images, perfect scalable background images und this Diskussion.

Answer 2

Ok. Hier ist, wie es funktioniert (Dank @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; 
    } 

So legen Sie es zuerst 100%, dann cover. Auf diese Weise erhalten alle Browser, die keine cover haben, den 100% -Wert, während diejenigen, die die 100% -Schutzüberschrift erhalten können.

Answer 3

-Code hier

Es Befestigungs Größen Hintergrundbilder für ipad

Geben Sie nach Ihrem Bild dimentions

/* 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

Soweit ich weiß, ist diese Methode funktioniert auf allen IOS-Geräte. Abhängig von Ihren anderen Seitenelementen (Header usw.) müssen Sie möglicherweise den Z-Index für das &: vor dem psuedo-Element anpassen.

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

Nach Designing Websites for iPhone X iOS 11 führt eine neue Erweiterung für den bestehenden viewport Meta-Tag viewport-fit genannt, die Kontrolle über das Einsteckmaschine Verhalten bietet. Die Standardeinstellung ist auto, die nicht den gesamten Bildschirm abdeckt.

Um den Standardeinsatz Verhalten und bewirken, dass die Seite zu legen, auf die volle Größe des Bildschirms zu deaktivieren, können Sie viewport-fit-cover gesetzt, wie hier gezeigt:

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

Ohne diese Einstellung bestehenden Techniken Für Begrüßungsbildschirme und Heldenbilder in Originalgröße werden auf dem iPhone X oder anderen konformen iOS-Geräten möglicherweise nicht die erwarteten Werte angezeigt.