Archiv rubriky: Mobilní

HTML, Mobilní, Pozicování

Přizpůsobení stránky na šířku mobilu či tabletu

Napsat komentář

Po použití předchozího tipu na full screen stránku možná narazíte na problém u mobilních zařízení (iPhone, iPad, Android), které si se šířkou stránky moc nelámají hlavu. Je potřeba je přinutit zobrazit stránku ve výchozím stavu tak, aby se šířkou přizpůsobila na šířku displeje (ať už je zařízení otočené na výšku či šířku).

Vložte do hlavičky stránky tento tag:

<meta name="viewport" content="width=1080, height=1920, user-scalable=yes" />

Tím řeknete, že stránka je optimalizována pro rozlišení 1080×1920 (můžete změnit, pokud máte jiné) a donutíte tak prohlížeč, aby stránku přizpůsobil.

Hodnotou user-scalable povolíte uživatelům, aby si mohli stránku přiblížit a lépe ji přečíst (zvláště užitečné na malých zařízeních).

Důležité je, aby tag viewport NEOBSAHOVAL hodnotu initial-scale, protože tím naopak říkáte, že stránka se NEMÁ přizpůsobit na šířku zařízení, ale má se zobrazit v určeném rozlišení (tedy 1:1)!

Mobilní, Prohlížeče, WebKit

Renderovací chyby ve WebKitu

Napsat komentář

WebKit jádro je známé chybami ve vykreslování (renderování), které se projevují efektem duchů; tedy tím, že při skrolování se vzhled prvku (částečně) „nakopíruje“ několikrát nad sebe (tak jak je ukázáno na obrázku).

Zpravidla se to stává, pokud máte na stránce kombinace prvků s CSS styly position:fixed, opacity nebo visibility. Například tahle chyba se objevila v Chrome ve verzi 15 a byla opravena ve verzi 19.

Chyba tedy zmizí stejně jako se objevila (tzn. vývojáři webkitu ji v některé verzi vytvořili a pak ji opraví v nějaké následující), ale mezitím je potřeba použít workaround známý jako hasLayout-fix:

.hasLayoutFix {
    -webkit-transform:translateZ(0);
}

Tento styl aplikujte na prvek, který se špatně renderuje.

Styl sám nemá žádný vliv na vhled, protože otáčí prvkem o 0° v 3D prostoru, ale jeho důsledek je ten, že renderovací jádro musí prvek vyjmout z 2D prostoru (ve kterém se běžně HTML prvky renderují) a přesunout ho do 3D prostoru (zpravidla to znamená, že ho začne renderovat grafická karta) a tím dojde k obejití chyby v jádře.

Alternativný verze hasLayout-fix funguje obdobně, jen nechá prvek zvětšit na 100% původní velikosti:

.hasLayoutFix2 {
    -webkit-transform: scale3d(1,1,1);
}

Přesun prvku do 3D prostoru může snížit výkonnost na některých zařízeních (zpravidla starší iPhony a Androidy bez vlastního grafického čipu), ale většinou je lepší mít o něco pomajelší skrolování než při něm vidět duchy.

Mobilní, Ovládání

Skrolování prstem

Napsat komentář

Možná to zní divně, ale ani na dotykových zařízeních není výchozí, že lze skrolovat obsah prstem.

Celou stránku samozřejmě posouvat prstem jde, ale pokud do stránky vložíte nějaký kontejner např. s overflow:auto nebo overflow:scroll, tak mobilní prohlížeče tyto styly zpravidla ignorují a zobrazí jen to, co se vejde na obrazovku.

Pro povolení ale stačí použít jednoduchý styl:

.container {
    /* nastaví scrollování na desktopu */
    height: 100%;
    overflow: auto;
    
    /* povolí skrolovat obsah prvku
       pomocí posouvání prstem */
    -webkit-overflow-scrolling: touch;
}

Pozor ale na to, že takto upravený kontejner může na některých zařízeních způsobovat určité problémy (např. posouvání nebude tak plynulé jako když jde o jednoduchou stránku).

Mobilní, Ovládání

Vynucení jednoduchého chování na mobilech

Napsat komentář

Chytré telefony (iPhone, Android, apod.) mají ve svých prohlížečích celou řadu doplňkových vlastností, které se vám ale ne vždy mohou hodit. Pro jejich vypnutí můžete použít některý (nebo i všechny) z následujících vlastností:

html, body {
    /* zakázání změny velikosti textu
     - užitečné, pokud máte layout přesně
       napasovaný na použité texty */
    -webkit-text-size-adjust: none;

    /* zakáže použití akce tap&hold
      (podržení) pro zobrazení kontextového
       menu - touto akcí se většinou dá
       zkopírovat text stránky, uložit
       obrázek ze stránky, apod. */
    -webkit-touch-callout: none;

    /* zakáže použití akce tap&hold
      (podržení) pro výběr textu - užitečné,
       pokud text tvoří část grafiky a
       není tedy vhodné, aby šel vybrat
       a zkopírovat */
    -webkit-user-select: none;

    /* Povolí Fast-Tap pro rychlé reakce
       odkazů a tlačítek; také vypne zoom
       pomocí double-tap; iOS 9.3+ */
    touch-action: manipulation;
}