Archiv štítku: zoom

Responzivní obrázky na míru prohlížeči

Webkit nyní podporuje tzv. Client Hints („rady od klienta“), pomocí kterých můžete na serveru připravit obrázky a ostatní zdroje tak, aby se co nejlépe hodily pro příslušný prohlížeč nebo zařízení.

Když prohlížeč požádáte, může v každém požadavku poslat údaje o rozlišení a rychlosti připojení zařízení, takže budete přesně vědět, co si můžete dovolit stáhnout a zobrazit, aby to neovlivnilo rychlost zobrazení a kvalitu stránky.

Pokračování textu Responzivní obrázky na míru prohlížeči

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

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)!

Nastavení velikosti pozadí

Pokud máte na pozadí nějakého prvku obrázek, možná budete potřebovat nastavit jeho velikost. To hlavně v případě, že děláte responzivní layout, který se zvětšuje podle rozlišení zařízení.

Poznámka: Níže uvedené vlastnosti background-* fungují jen v prohlížečích IE9+, Firefox 6+, Chrome 11+, Safari 5+, Android 4+ a  iOS 7.1+.

Velikost nastavíte např. takhle:

.big-background { background-size: 50%; }

Pokud chcete, aby obrázek na pozadí (např. ikonka v menu) přesně zapadnul do řádku, bude se hodit např. tento styl:

ul.menu li img.icon {
    background-size: 1EM; 
}
/* Jednotka EM odpovídá poměru
   vůči hodnotě font-size */

Obrázek ale nemusíte zvětšovat jen lineárně, ale můžete použít dvě velikosti k roztažení obrázku jen v jednom směru:

.background {
    background-image: url('bg_1x100px.jpg');
    background-repeat: repeat-x;
    background-size: 1px 1EM;
}

Předchozí styl zvětší obrázek na výšku řádky, ale přitom ponechá jeho šířku na 1px, aby se zbytečně neroztahoval v rozměru, kde to za něj udělá opakování.

Pokračování textu Nastavení velikosti pozadí

Vynucení jednoduchého chování na mobilech

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+ */
    <code>touch-action: manipulation</code>;
}