Adresování adresního řádku systému iOS ve 100vh rozvržení

Není to chyba, je to funkce.

Když jsem nasadil svou první konverzi PSD s krásným obrázkem hrdiny 100 VH a 100 V, byl jsem zděšen, když jsem zjistil, že dno mého rozvržení bylo při pohledu z mého iPhone 6s iOS 10 Safari skryté. Proč? Myslel jsem, že jsem udělal všechno správně! Přidal jsem omylem někde okraj nebo výplň? Co jsem s výhledem?

Při bližším zkoumání jsem si rychle uvědomil, že ačkoli můj obraz hrdiny byl ve skutečnosti 100 vh, byl částečně zakrytý Safari adresou a panelem nástrojů, čímž se vytvořil obávaný „kroutit“. To je v pořádku, pomyslel jsem si. Nic rychlého vyhledávání na Google a Stack Overflow nelze opravit. Dozvěděl jsem se však, že řešení není tak jednoduché.

Po provedení nějakého výzkumu jsem si uvědomil, že se jedná o docela běžnou stížnost, která se označuje jako „chyba posouvání výřezu zobrazení systému iOS“. V únoru 2015 Nicolas Hoizy nahlásil chybu na serveru Webkit Bugzilla, když zjistil, že spodní část jeho 100vh mobilní hry byla přerušena pruhem tlačítek prohlížeče. Benjamin Poulain, inženýr společnosti Apple, odpověděl na Hoizyho. Pravým programátorem prohlásil, že to nebyla chyba, je to funkce.

To je zcela záměrné. Dosažení tohoto účinku vyžadovalo z naší strany trochu práce. :)

Základní problém je tento: viditelná oblast se při rolování dynamicky mění. Pokud odpovídajícím způsobem aktualizujeme výšku výřezu CSS, musíme během posouvání aktualizovat rozvržení. Nejenže to vypadá jako hovno, ale na většině stránek je to prakticky nemožné (60 FPS je základní snímková frekvence na iOS).

Je těžké ukázat vám část „vypadá jako hovno“, ale představte si, jak se posouváte, obsah se pohybuje a to, co chcete na obrazovce, se neustále posouvá.

Dynamická aktualizace výšky nefungovala, měli jsme několik možností: přetažení jednotek výřezu na iOS, přizpůsobení velikosti dokumentu jako před iOS 8, použití malé velikosti pohledu, použití velké velikosti pohledu.

Z údajů, které jsme měli, bylo nejlepší kompromisem použití větší velikosti pohledu. Většina webových stránek používajících zobrazovací jednotky vypadala většinou skvěle.

Já pro jednoho nejsem inženýr v Apple, takže mu věřím, když říká, že existují dobré důvody, proč toto chování navrhli. Bug byl tedy označen jako „ROZHODNUTÝ WONTFIX“ a uvědomil jsem si, že bych se musel ponořit hlouběji, kdybych někdy chtěl svůj krásný, 100vh obraz hrdiny.

Řešení 1: Mediální dotazy CSS

Tato metoda, i když ne zcela elegantní, je jednoduchá a snadno implementovatelná. Jednoduše zacílte na všechna zařízení iOS pomocí specifické šířky a výšky zařízení. Zde je kód, s laskavým svolením pburtchaell, kde „.foo“ by byla třída na vašem prvku v plné výšce.

@media all a (šířka zařízení: 768px) a (výška zařízení: 1024px) a (orientace: na výšku) {
    .foo {
        výška: 1024px;
    }
}
                                            
/ * iPad s orientací na šířku. * /
@media all a (šířka zařízení: 768px) a (výška zařízení: 1024px) a (orientace: na šířku) {
    .foo {
        výška: 768px;
    }
}
                                               
/* iPhone 5
Můžete také zacílit na zařízení s poměrem stran. * / @media obrazovka a (poměr stran zařízení: 40/71) {
    .foo {
        výška: 500px;
    }
}

Při pohledu na výše uvedený kód se zdá, že je nevyhnutelné mírné překrývání obsahu. Prvky s polohováním a dimenzováním, které závisí na zobrazovacích jednotkách, by však zůstaly konstantní. To je vítězství! Přidání něčeho jako jednoduchý výpočet (100 Vh - výškaOfBar) by kompenzovalo adresní řádek. Ale s podporou tolika zařízení a prohlížečů se to nezdá být udržitelným řešením.

Řešení 2: Cílení na InternalHeight pomocí Javascriptu.

Vnitřní měření se vztahují na výšku / šířku výřezu, přičemž se berou do úvahy svislé / vodorovné posuvníky. Teď mluvíme! Zde je schéma toho, co to znamená.

Pomocí těchto znalostí můžete pomocí jednoduchého skriptu, jako je tento, nastavit výšku při načítání stránky a udržovat ji konstantní až do změny velikosti, od uživatele Stack Overflow tobiq:

window.onresize = function () {
    document.body.height = window.innerHeight;
}
window.onresize (); // nazývá počáteční nastavení výšky.

Řešení 3: Reaktorová složka Div100vh

Protože všichni milujeme React, chtěl jsem najít řešení zajištěné pro React Components. Našel jsem npm balíček od Michail Vasina, jehož cílem je tento problém vyřešit. Instalujte takto:

npm install - saveave-div-100vh

Pak naimportujte komponentu a zabalte do ní prvky, například:

importovat Div100vh z 'reagovat-div-100vh';
const MyFullscreenComponent = () => (
    
       Vaše věci jdou sem
    
)

A je to!

Po vyzkoušení těchto různých řešení si uvědomuji, že pro tento problém neexistuje univerzální řešení. Proto buďte opatrní při testování v různých prohlížečích a v různých zařízeních. A možná se vyhýbejte používání jednotek vh / vw pro mobilní zařízení, protože chování mobilních telefonů s těmito jednotkami je v mobilních prohlížečích dobře zdokumentováno.

Dejte nám vědět, jestli vám tato řešení pomohla a která z nich fungovala nejlépe!