Autor Zpráva
anonymníí
Profil *
Ahoj,

hraju si s responsivním designem a potřeboval bych poradit s následujícím. Používám zápis
<meta name="viewport" content="width=device-width; initial-scale=0.5; maximum-scale=0.75; user-scalable=yes "> 
<meta name="apple-mobile-web-app-capable" content="yes">
který funguje výborně na retina displejích (díky nastavenému initial-scale), ale na androidu (s menším DPI) má klient web přizoomovaný (osobně myslím, že spíše odzoomovaný, nicméně na vině bude právě tento scale - podle mě).

Jak to mám řešit, dá se nastavit, že při nějakém DPI bude scale 1 a při jiném 0.5? Kde je ta hranice? Nebo jak to řešit správně, aby to bylo cross-device?
Chamurappi
Profil
Reaguji na anonymníího:
dá se nastavit, že při nějakém DPI bude scale 1 a při jiném 0.5?
Před viewport? Asi ne, nevím o tom.
Přijde mi zvláštní nastavovat initial-scale na hodnotu menší než jedna. To je nějaká známá finta, která mi unikla? Sám obvykle nechávám výchozí přiblížení 1 a počítám s tím, že věci můžou být i menší než jeden CSS pixel.
Sennin
Profil
Nazdar anonymníí
Ja používam vždy
<meta name="viewport" content="width=device-width, initial-scale=1">

A ak si prejdeš väčšinu stránok ktoré sú responsive tak nájdeš len vyššie uvedený zápis
anonymníí
Profil *
Chamurappi:
no, při initial-scale=1 používá iphone s retina displejem šířku 320px, zatímco má rozlišení 640px a může tak zobrazovat něco víc, než stařičké telefony s opravdovými 320px.

Ono totiž při initial-scale=1 je naněm všechno větší než na tom starém telefonu se skutečnou šíří 320px. Otázka ale je, jak se chovají androidí telefony s velkými rozlišeními, resp. velkými DPI, kterých jsou teď už mraky.
Enyeus
Profil
anonymníí:
Pro retina iPhone používám běžně
<meta name="viewport" content="width=device-width, initial-scale=1">
A v CSS pak přes media queries vložím obrázky v 2x takové rozlišení, aby na retině nebyly rozmazané:
body {
    background-image: url(images/bg-cloud.png);
    background-size: 320px 51px;
}
@media (-webkit-min-device-pixel-ratio: 1.5) {
    body {
        background-image: url(images/bg-cloud@2x.png);
    }
}
Má to výhodu, že se to právě nerozhodí na ostatních zařízení jako u initial-scale=0.5
Chamurappi
Profil
Reaguji na anonymníího:
při initial-scale=1 používá iphone s retina displejem šířku 320px, zatímco má rozlišení 640px a může tak zobrazovat něco víc
Jak jsem již psal, stačí vzít v úvahu, že věci můžou být i menší než jeden pixel. Nefunguje to tak, že prohlížeč si vykreslí stránku do 320px a pak ji hloupě bitmapově roztáhne — on ji poctivě vykresluje do 640px, akorát ví, že px v CSS je dlouhý jako dva skutečné px.


Reaguji na Enyea:
@media (-webkit-min-device-pixel-ratio: 1.5) {
I Windows Phone má device-pixel-ratio minimálně 1.5 a ten tuhle deklaraci nepochopí.
Jaký je rozdíl v datové velikosti mezi images/bg-cloud@2x.png a images/bg-cloud.png? Vyplatí se vůbec někomu neposílat kvalitnější verzi?
Enyeus
Profil
Chamurappi:
U Windows Phone to je bohužel pravda. Mám ale HTC Radar (WP 7.8) a tam 480px na šířku znamená opravdu 480px ná šířku, na rozdíl od iPhonu.
Verze @2x je datově ve skutečnosti 20x větší.
anonymníí
Profil *
Chamurappi:
Nefunguje to tak, že prohlížeč si vykreslí stránku do 320px a pak ji hloupě bitmapově roztáhne
nebavíme se o obrázkách. Jde o text. Ten je tak na iPhonu zbytečně velký, 2x větší než na 320px u starého telefonu.

Pokud chci zachovat čitelnost na starších strojích (tzn. dostatečně velké písmo), na iPhonu z webu dělám web pro slepé, což nechci. Proto potřebuji dosáhnout toho, aby se brala v potaz reálná šířka viewportu, nikoliv ta, smrsknutím pixelů, "doporučená".

Enyeus:
Verze @2x je datově ve skutečnosti 20x větší.
ač se nebavíme o obrázcích, k tomuhle se vyjádřit musím. Když se dělají sólo obrázky pro retina displeje, datová velikost bývá větší o cca 50-70%. Pokud máš obrázek větší dvacetinásobně, někde děláš chybu v průběhu exportu obrázku.
Chamurappi
Profil
Reaguji na anonymníího:
Ten je tak na iPhonu zbytečně velký, 2x větší než na 320px u starého telefonu.
Tomu nějak nerozumím. Fyzicky je ten nový iPhone skoro pořád stejně velký jako starý iPhone, jen pixely jsou drobnější => text sice využívá víc pixelů, ale na pohled není větší, má jen prokreslenější detaily. Tak co píšeš o slepých?


Reaguji na Enyea:
Mám ale HTC Radar (WP 7.8) a tam 480px na šířku znamená opravdu 480px ná šířku
Mám dva WP 7 a oba při width=device-width imitují šířku 320px nebo 480px v závislosti na natočení telefonu. Vzhledem k tomu, že žádný WP 7 neměl vyšší rozlišení displeje než 480x800, ani dramaticky větší rozměry, nechce se mi věřit, že se tvůj HTC chová jinak.
anonymníí
Profil *
Chamurappi:
No... Mám tu k porovnání stařičký kousek, Nokii C5-03, kterou jsem zachránil před vyhozením pro testování na starých strojích.

C5-03
rozlišení (šířka): 360px
šířka (mm): 51mm, cca 40mm bez rámečku (aktivní plocha).

iPhone 5
rozlišení (šířka): 640px
šířka (mm): 58mm, cca 52mm bez rámečku

Pokud použiju initial-scale: 1, vidím stejné rozložení jako na staré Nokii, ale text téměř dvakrát větší (pokud bych ho neměřil v pixelech, ale srovnatelných jednotkách, třeba mm). Dobře, 1,5x, ať nepřeháním.

Jiná věc:
Při využití všech 640px šířky (scale=.5) vidím logo, menu - co položka, to řádek se 100% šířkou (cca 3/5 obrazovky) a kus obsahu. Můžu zoomovat dle libosti, ale není to třeba, font je dostatečně velký, čitelný.

Při využití pouhých 320px šířky (scale=1) vidím logo a (necelé) menu. Jak jinak si to vysvětlit, než že text je dvakrát větší? :-) Kam se mi poděl ten zbytek, který jsem viděl výše? Není, protože font je větší (reálně, měřeno pravítkem). Znatelně.


anonymníí:
Pokud použiju initial-scale: 1, vidím stejné rozložení jako na staré Nokii, ale text téměř dvakrát větší (pokud bych ho neměřil v pixelech, ale srovnatelných jednotkách, třeba mm). Dobře, 1,5x, ať nepřeháním.
to souvisí pravděpodobně s poměrem pixelové a mm šířky obou přístrojů, kterou uvádím výše. Ale nejsem si tím zcela jistý. bylo by to logické.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: