Přizpůsobte své uživatelské rozhraní obrazovce mobilních prohlížečů

Přizpůsobit uživatelské rozhraní obrazovce mobilních zařízení je někdy divné. Většina mobilních prohlížečů má navigační lišty nebo nabídky aplikací, které se skryjí, když uživatel posouvá stránku dolů. Tím se změní skutečná výška okna. Jaký je v tom rozdíl? Řekněme, že chcete, aby vaše zápatí bylo opraveno ve spodní části každé stránky. Bez pořádné opravy to nepůjde. Zde je rozdíl:

Vím, že moje kresba je špatná, ale doufám, že máte nápad. To je ještě důležitější při práci s modály na mobilu:

Pokud se vaše modály nevejdou na obrazovku, uživatelé neuvidí některé části vašeho uživatelského rozhraní. Možná jim budou chybět některá důležitá tlačítka. Jak to opravit? No, je to velmi snadné.

1. Přidejte metaznačku zobrazení

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

Vím, že je to Responsive 101, ale začátečníci na to obvykle zapomínají. Takže pro případ...

2. Nastavit proměnnou CSS

  const resizeOps = () => {
    document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px");
  };

  resizeOps();
  window.addEventListener("resize", resizeOps);

Tento blok by se měl spustit, jakmile se aplikace spustí. Při každé změně velikosti okna nastaví 1 % skutečné výšky zobrazení okna jako proměnnou CSS. Tuto proměnnou použijeme v dalším a posledním kroku.

3. Upravte svůj CSS

html, body {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

Vlastnost First height je pro starší prohlížeč v případě, že prohlížeč nepodporuje CSS proměnné. Jeho tabulku podpory si můžete prohlédnout zde . Pokud nechcete, aby se takto chovala celá vaše stránka, můžete také udělat něco takového:

.modal {
  width: 50vw;
  height: 50vh;
  height: calc(var(--vh, 1vh) * 50);
}

Ve zkratce; pro jednotlivé prvky uživatelského rozhraní stačí použít calc(var(--vh, 1vh) * 50) místo 50vh .

Doufám, že to bylo užitečné, můžete mě také sledovat na Twitteru pro budoucí obsah:

twitter.com/oznbll