Autor Zpráva
xxxObiWan
Profil
Ahoj,
už si vážně nevím rady a prosím o nakopnutí.

Mám stránku, kterou chci pomocí CSS media queries optimalizovat pro mobily. V hlavičce mám
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
Narážím ale postupně na několik problémů:

1) Testuji na svém Huawei Ideos X1, který má šířku displeje 240 px. CSS by tedy mělo vypadat nějak takto:
@media (max-width: 240px) {
    body: { background-color: red; }
}
což ale neudělá nic.

2) Říkám si tedy: "Kde je problém?", a do dokumentu dávám javascript na vypsání rozlišení displeje:
<div>
    <script>
    document.write(screen.width + 'x' + screen.height);
    </script>
</div>
Ten vypisuje text "320x425". To je divné, můj mobil má šířku displeje 240 px, ne 320.

3) "To nevadí", říkám si, četl jsem totiž o tom, že mobilní prohlížeče si obsah automaticky zoomují, aby mohli na displeji zobrazit více obsahu, než kolik by zobrazily normálně. Nechávám si tedy vykreslit dvě čáry, jednu širokou 240px a druhou 320px. Čekám, že ta 320px se krásně vejde na displej, když mi javascript říká, že mám k dispozici šířku 320px:
<hr style="width: 240px;">
<hr style="width: 320px;">
K mému překvapení ale šířku displeje zaplnila první čára (240px), ta druhá (320px) z něj vylezla o oněch 80px.

Takže suma sumárum: Javascripty si myslí, že mají k dispozici displej o šířce 320px. CSS si myslí, že má k dispozici displej o šířce 320px. Ale ve skutečnosti je displej široký jen 240px. A takto se media queries podivně chovají i na iPhonu. Problém tedy bude zřejmě v mé neznalosti CSS, nebo mobilních prohlížečů.

Poraďte prosím, kde dělám chybu. Děkuji.

P.S. Celý testovací zdrojový kód k nahlédnutí zde: http://pastebin.com/ULNm4RfW
Chamurappi
Profil
Reaguji na xxxObiWana:
Javascripty si myslí, že mají k dispozici displej o šířce 320px.
Objekt screen se na většině webů používá jen na statistiku, protože nijak nesouvisí s rozměry prohlížeče. Většina mobilů proto ve screen.width a screen.height vrací opravdové rozlišení displeje. Prohlížečové pixely bývají buď ve window.innerWidth a window.innerHeight, nebo v jejich outer-variantách (je v tom docela binec). Můžeš také zkusit změřit document.documentElement.clientWidth, tam by mělo být už zaručené, že jednotkami bude prohlížečový pixel.

CSS si myslí, že má k dispozici displej o šířce 320px.
Je to skutečně přesně 320? Telefony s menším displejem jsou schopné mít i exotičtější (méně kulaté) šířky.

Celý testovací zdrojový kód k nahlédnutí
V quirku může <meta name="viewport"> fungovat trochu jinak než ve standardním režimu. Také si nejsem jistý tím, co přesně udělá HandheldFriendly.
xxxObiWan
Profil
Díky moc za odpověď, ale to mi v praxi nepomůže. K čemu je mi
@media (max-width: 240px) { ...
když na něj prohlížeč reaguje špatně?

Proč přestože se na displej vejde pouze oněch 240 px, je tento media-query ignorován?
Chamurappi
Profil
Reaguji na xxxObiWana:
Při width=device-width se nepočítá s opravdovou device-width, protože by na většině chytrých telefonů byly pixely příliš mrňavé. Prohlížeč se i na telefonu s velkým rozlišením raději tváří, jako by měl šířku okolo 320px, protože při té vypadá většina mobilních webů dobře. To, že telefony s menším rozlišením lžou, až tak obvyklé není.

přestože se na displej vejde pouze oněch 240 px
Jaký je to prohlížeč?
Opravdu je to přesně 240 pixelů?
Ten standardní režim jsi zkoušel?
Joker
Profil
xxxObiWan:
Díky moc za odpověď, ale to mi v praxi nepomůže.
Třeba jo. Kolik je window.innerWidth?
xxxObiWan
Profil
Chamurappi:
Většina mobilů proto ve screen.width a screen.height vrací opravdové rozlišení displeje.
U mě ale vrací špatné. To je ale vedlejší, záleží mi teď hlavně na tom, aby správně fungovaly media queries v CSS.

Chamurappi:
Prohlížečové pixely bývají buď ve window.innerWidth a window.innerHeight, nebo v jejich outer-variantách (je v tom docela binec).
window.innerWidth: 320px
window.outerWidth: 240px
...v tom je asi opravdu binec :-D když outerWidth je menší, než innerWidth :-/

Chamurappi:
Můžeš také zkusit změřit document.documentElement.clientWidth, tam by mělo být už zaručené, že jednotkami bude prohlížečový pixel
document.documentElement.clientWidth: 320px

Chamurappi:
Je to skutečně přesně 320? Telefony s menším displejem jsou schopné mít i exotičtější (méně kulaté) šířky.
Je to něco mezi 311 a 320. Potvrzeno mým testem, který jsem si před chvílí napsal: http://michal.webshake.cz/responsive.html

Chamurappi:
V quirku může <meta name="viewport"> fungovat trochu jinak než ve standardním režimu.
Chování je úplně stejné, CSS si pořád myslí, že má k dispozici šířku 320px. Potvrzeno testem: http://michal.webshake.cz/responsive-standard.html

------
Pro úplnost tedy, oba zmíněné testy (responsive.html i responsive-standard.html) mi vypisují na mobilu toto:
Java-scripts 
screen.width: 320
window.innerWidth: 320
window.outerWidth: 240

Media queries
@media (min-width: 311px) and (max-width: 320px)

**EDIT:** Zkoušel jsem to v Dolphin browseru, i v klasickém androidím prohlížeči. Chování i hodnoty u obou stejné.
Kcko
Profil
xxxObiWan:
Mám samsung galaxy ace (320*480) a dle tvého testu mi to ukazuje:

screen.width: 290
window.innerWidth: 291
window.outerWidth: 320

Takže do rozlišení se vejdu, ale skutečné rozlišení je menší, takže je to asi tak jak píše Chamurappi.

Edit: Můj kolega ma NOTE 2 a ukazuje to 360 / 980 / 360 (screen.width a window.outerWidth je stejný, u mě ne ..) z toho se dá taky leccos usoudit, že co telefon to jiný pes jiná ves.
Edit2: a ještě k dalším rozlišením na stránce http://responsejs.com/labs/dimensions/
pako
Profil *
trochu off-topic ale mozno niekomu pomoze: tabulka kompatibility mobilnych prehliadacov Browser compatibility — viewports a clanok o rozliseniach a zistovani velkosti A take of two viewports
xxxObiWan
Profil
Ok, tak tu otázku trochu upravím :-)

Mám web a chci ho optimalizovat pro mobily. Tak zmenšuju v PC prohlížeč, zmenšuju zmenšuju, a vidím, že u šířky 300px se to rozbije, všude jsou posuvníky a nevypadá to hezky. A tak si pro toto rozlišení chci upravit styly. Co mám v tomto případě napsat za @media max-width: do CSS?

Děkuji.
Kcko
Profil
xxxObiWan:
všude jsou posuvníky a nevypadá to hezky

Napiš to tak, aby tam ty posuvníky nebyly. Tj. vytvoř např. fluidní layout, v případě potřeby vyházej ze stránky nepotřebné informace ..., roztahuj bloky na 100% šířku atd.
Cílem responsivního designu obzvlášt v nižších rozlišeních je dostupnost informací.
xxxObiWan
Profil
Kcko:
Napiš to tak, aby tam ty posuvníky nebyly. Tj. vytvoř např. fluidní layout
Říkáš, že nemám používat media queries, ale mám grafiku nakódovat tak, aby se přizpůsobovala sama jakémukoli rozlišení? To bohužel u složitějších grafik není možné ;-)
Kcko
Profil
xxxObiWan:
Nic takového, jako je nepoužití MQ jsem neřekl. Taky jsem ted převáděl zpětně 2 weby do responsivu a ted první byl extrémně složitý (grafikou, X napozicovaných věci kvůli složitosti, samé stíny, přechody, rožky, milion obalů, protože grafik zamrzl v čase kdy měl photoshop boom s těmito efekty ...). A prostě responsive je osekán, tak aby byly dostupné informace. (Vyházel jsem zbytečnou grafiku, skryl až tak nepodstatné věci, některé věci přemístil atd.)

Je to vždy otázka kompromisu, ty jsi kodér, ty děláš responsive, na Tobě je si případnou osekanější verzi obhájit před klientem.

Edit: Pro klid duše, bych si projel nějaké větší weby tak jak vypadají v normálním rozlišení a pak se podíval na nižší a uvidíš co s tím dělají oni.
Chamurappi
Profil
Reaguji na xxxObiWana:
záleží mi teď hlavně na tom, aby správně fungovaly media queries v CSS
Je to divné, že nefungují.
Zkoušel jsi vyhodit HandheldFriendly? Třeba má nějaký vliv.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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