dlaczego rozmiar tła CSS: okładka nie działa w trybie portretowym na iOS?

Question

Próbuję skonfigurować ręczne splash-image na różnych urządzeniach. Robię to sprawdzając orientation (urządzenia dotykowe) lub screen width vs. screen height (brak dotyku) i odpowiednio ustawiam URL.

Potem dodać tę regułę CSS za pomocą 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) 

Z x jest obraz ma być załadowany w zależności od orientacji i rozmiaru ekranu.

Mój problem polega na tym, że działa dobrze w trybie landscape, ale na moim iPadzie w trybie portrait jest ładowany prawidłowy obraz (różni się w zależności od portretu/krajobrazu), ALE nie jest rozszerzony do rozmiaru pełnoekranowego.

Pytanie:
nie mogę użyć CSS background-size na iOS w trybie portretowym-?

Dzięki za pomoc!

EDYCJA:
Po prostu wypróbowany na moim smartfonie z systemem Android. Działa dobrze. Nie ma sensu, dlaczego nie działa na iPadzie.

Answer 1

Podczas sprawdzania orientacji prosimy o zapoznanie się z tymi punktami z dokumentu Apple -

Zapewnić uruchamiania obrazów:

iPhone'a tylko aplikacje może mieć tylko jeden obraz uruchamiania. Powinien być w formacie PNG i mieć wymiary 320 x 480 pikseli. Nazwij swój obraz startowy plik Default.png.

Aplikacje przeznaczone tylko dla iPada: Utwórz obraz uruchamiania dla każdej obsługiwanej orientacji w formacie PNG. Każdy obraz uruchomienia musi mieć 1024 x 748 pikseli (dla krajobrazu) lub 768 x 1004 pikseli (dla portretu).

Powszechne zastosowania: Dołącz obrazy uruchamiania zarówno dla iPhone'a, jak i iPada.

zaktualizować ustawienia Info.plist określić wartości dla UISupportedInterfaceOrientations i UIInterfaceOrientation

i

Nie wszystkie przeglądarki rozpoznają słowa kluczowego przykrywką dla tła wielkości, w wyniku czego po prostu zignoruj ​​to.

więc możemy pokonać to ograniczenie przez ustawienie tła rozmiarze do 100% szerokości lub wysokości, w zależności od orientacji. Możemy kierować się bieżącą orientacją (a także urządzeniem iOS, używając szerokości urządzenia).Z tych dwóch punktów Myślę, że można użyć CSS background-size:cover na iOS w trybie portretowym-

Oto inne zasoby ja też natrafiliśmy podczas szuka rozwiązania: Flexible scalable background images, full scalable background images, perfect scalable background images i this dyskusja.

Answer 2

Ok. Oto jak to działa (Dzięki @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; 
    } 

Więc najpierw ustawić go 100%, następnie do cover. W ten sposób wszystkie przeglądarki, które nie mogą cover uzyskać 100% wartości, a te, które mogą uzyskać 100% nadpisane przez okładkę.

Answer 3

kod tutaj

To mocowania obrazów tła dla ipad

Wystarczy wpisać rozmiary według swoich wymiarach obrazu

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

O ile mi wiadomo, ta metoda działa na wszystkich Urządzenia IOS. W zależności od innych elementów strony (nagłówek itp.) Może być konieczne dostosowanie indeksu z dla &: przed elementem psuedo.

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

Według Designing Websites for iPhone X iOS 11 wprowadza nowe rozszerzenie dla istniejącego viewport meta tag o nazwie viewport-fit, która zapewnia kontrolę nad zachowaniem insetting. Ustawienie domyślne to auto, które nie obejmuje całego ekranu.

Aby wyłączyć domyślne zachowanie wstawka i spowodować stronę rozłożyć do pełnego rozmiaru ekranu, można ustawić viewport-fit do cover jak pokazano tutaj:

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

Bez tego ustawienia istniejącej techniki stosowane na ekrany powitalne i pełnowymiarowe obrazy bohaterów mogą nie być wyświetlane zgodnie z oczekiwaniami na telefonie iPhone X lub innych zgodnych urządzeniach z systemem iOS.