Stará verze iOS7, která je ale momentálně poslední dostupná pro iPhone 4 a staré iPady, obsahuje nepěkný bug, který znemožňuje použít správně jednotky „vh“.
Námět opravy: styles.css od pburtchaell.
Více o chybných verzích viz caniuse.com.
Jednotka by měla odpovídat jednomu procentu výšky obrazovky (resp. okna prohlížeče), ale na iOS7 kvůli špatné implementaci odpovídá 1% výšky stránky. Pokud tedy máte stránku delší než je obrazovka, bude se tato jednotka chovat špatně oproti ostatním prohlížečům.
Problém je v tom, že prohlížeč se tváří, jako že jednotku podporuje, takže na něj nefunguje trik s dvojitými pravidly:
body {
/* pro staré prohlížeče */
background-size: 100% 100%;
/* pro nové prohlížeče */
background-size: 100vw 100vh;
}
Pro obejití této chyby musíte přidat buď malý javascript, který iOS7 rozpozná, nebo CSS pravidla, která se pokusí chybu opravit jinými pravidly.
Pro detekci iOS7 přidejte do body stránky:
<body>
<script>
if (navigator.appVersion.match(
/(iPhone|iPad|iPod)\ OS\ [1-7]\_/)) {
document.getElementsByTagName('body')[0]
.className = 'old-ios';
}
</script>
<!-- zbytek stránky -->
Tento skript přidá do body třídu pro staré iOS verze, takže pak můžete v CSS přepsat chybná pravidla:
body {
/* pro staré prohlížeče */
background-size: 100% 100%;
/* pro nové prohlížeče */
background-size: 100vw 100vh;
}
body.old-ios {
/* pro iOS7 a starší */
background-size: 100% 100%;
}
/* ... */
.footer {
height: 2em;
height: 5vh;
}
.old-ios .footer {
height: 2em;
}
Pokud ale máte více pravidel využívající vh jednotky (a pravidla s .old-ios by zpomalovala ostatní prohlížeče), nebo potřebujete layout lépe napasovat na obrazovku iPhonu či iPadu, můžete použít tato CSS pravidla:
/* iPad na výšku */
@media (device-width: 768px)
and (device-height: 1024px)
and (orientation:portrait) {
body {
background-size: 768px auto;
}
}
/* iPad na šířku */
@media (device-width: 768px)
and (device-height: 1024px)
and (orientation:landscape) {
body {
background-size: 1024px auto;
}
}
/* iPhone 5 */
/* sice podporuje iOS9, ale nemusí
být aktualizovaný... */
@media (device-aspect-ratio: 40/71) {
body {
background-size: auto 568px;
}
}
/* iPhone 4 */
@media (device-width: 320px)
and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2) {
body {
background-size: auto 480px;
}
}
Nevýhoda posledního pravidla pro iPhone4 je, že také pasuje na některé starší Android zařízení (která ale zase nepodporují vh jednotky, protože jsou podporovány až od Android 4.4), ale také pasuje na iPhone 4S, který naopak podporuje novější iOS, takže na něm vh bude fungovat správně.
Pokud potřebujete pravidla zacílit pouze na iPhone4, nezbývá než zkombinovat oba uvedené postupy:
/* iPhone 4 */
@media (device-width: 320px)
and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2) {
body.old-ios {
background-size: auto 480px;
}
}