Problem z rozdzielczościami w mobile.

[hieroshima]

Witajcie, mam problem z rozdzielczościami pod urządzenia mobilne. Poniżej screen który powinien opisać cały mój problem:

http://screenshooter.net/5687025/yvdfqsr

Oba okna są ustawione na 480px (firefox i operaMobileEmulator) na urządzeniu fizycznym wyświetla się tak samo. Dlaczego 480px na dekstopie jest != od 480px na mobilnym (co w rzeczywistości daje pole max. 320px przy rozdzielczości 480x800). Domyślam się, że chodzi o punkty PPI i, że w mobilnym jest ich więcej, ale czy ja mam na to wpływ? Powiedzmy, że dostałem szablon strony na 480px no to pod mmobile zupełnie inaczej będzie wyglądał niż pod desktopem (a wiadomo, że chodzi o mobile), ale nie upchnę tego co jest w projekcie na mobile

[Kartofelek]

Bo screen w mobilce =/= screen na desktopie. Ogólnie to co widzisz na desktopie to jest wersja poglądowa i tyle.

Pierwsza sprawa - wejdź sobie na boilerplate html5 i ściągnij nagłówki meta. Szczególnie te dotyczące skalowania. Na ich stronie masz fajnie opisane czemu one są takie a nie inne.

Kod:

<meta name="viewport" content="width=device-width">

Powyższy kod wcale nie jest jedynie właściwym, dlatego poczytaj o tym na boilerze.

Druga sprawa - dla lipnych przeglądarek użyj response.js

Trzecia sprawa - NIGDY nie celuj w dane pixele, właśnie dlatego że to są różne szerokości. Albo wykorzystaj zakres wartości (np max 500, min 800 itp), albo (najlepiej) wykorzystaj EM - http://css-tricks.com/zooming-squishes/

A najważniejsza sprawa. Nie bierz tego co widzisz na desktopie za pewniak tego co widzisz w mobilkach. Przeglądarki na mobilkach są powalone i nawet dobrze selektów nie pokazują. U mnie np na samsungu wave 2 (chujowy telefon!) źle wyświetla selekty, nagłówki itp. Nie jest tragicznie, ale w 100% mobilek nie obsłużysz bo się nie da.

Do testowania używaj kilku stron z różnymi widokami. Jest tego setki w necie więc nie podaję linków.
Do tego opera mini i kombajn "Keynote mobile".

Czwarta sprawa. Daj piątaka ;]

[hieroshima]

Zawsze jade zakresami, dlatego nie rozwala mi się nic tylko ładnie układa obojetnie jaka rozdzialka. Mam max 480px i chciałem, żeby to 480px wyglądało tak jak w projekcie od grafika no ale znalazłem takie oto coś :

"Android phones that say they are 480px by 720px (800px or 854px) are actually not, they use a higher screen density to make elements look larger so they actually run at 320px by XXX"