@media (max-width) a mobilní prohlížeče

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
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:
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:
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:
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

Díky moc za odpověď, ale to mi v praxi nepomůže. K čemu je mi
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:
„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:

**EDIT:** Zkoušel jsem to v Dolphin browseru, i v klasickém androidím prohlížeči. Chování i hodnoty u obou stejné.

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:
„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é ;-)