| Autor | Zpráva | ||
|---|---|---|---|
| anonymníí Profil * |
#1 · Zasláno: 2. 6. 2014, 15:44:06
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"> 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 |
#2 · Zasláno: 3. 6. 2014, 11:25:26
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 |
#3 · Zasláno: 3. 6. 2014, 13:26:31
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 * |
#4 · Zasláno: 3. 6. 2014, 14:46:02
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"> 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);
}
} |
||
| Chamurappi Profil |
#6 · Zasláno: 3. 6. 2014, 15:45:57
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 |
#7 · Zasláno: 3. 6. 2014, 21:47:28
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 * |
#8 · Zasláno: 4. 6. 2014, 09:30:20
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 |
#9 · Zasláno: 4. 6. 2014, 10:01:28
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 * |
#10 · Zasláno: 4. 6. 2014, 14:45:04 · Upravil/a: anonymníí
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é. |
||
|
Časová prodleva: 10 let
|
|||
0