gdy ustawiłem już znacznik meta który nakreśla okno robocze:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
na mobile faktycznie mamy już skonfigurowane okno, ale nadal możemy je przesuwać na bok gdzie są inne elementy strony, które nie mieszczą się w tym oknie, jak przyciąć stronę tylko do tego okna, jak dostosować szerokość?
próbowałem w ten sposób:
.site_body {width:100%;}
ale nadal na mobile można przesuwać obraz
jeżeli jakieś elementy będą za duże, to niestety - pasek przesuwania będzie.
zrobienie wersji mobile to coś więcej niż dwie linijki...
chcesz żeby obcięło użytkownikowi wszystko co mu się nie zmieści na ekranie? WTF :| Przecież strona będzie nie do użytku na większości urządzeń
no tak, w takim razie jak najlepiej dostosowywać pojedyncze obiekty tak by nie były za duże na mobile?
określać wszystko procentowo + osobne arkusze styli (z warunkami media) dla różnych rozdzielczości i orientacji wyświetlacza
nie jest łatwo samemu uzyskać dobrze wyglądający responsywny layout, dlatego dobrze jest się wspomóc takimi frameworkami jak np bootstrap i innymi narzędziami http://designinstruct.com/roundups/html5-frameworks/
elementy strony mieszczą się w oknie roboczym, a nadal okno można przesuwać, co mogę teraz zrobić?
daj linka do tej strony, bo nic nie wydumamy "na sucho". ew wymuś na chama ucięcie treści poprzez overflow: hidden
zmniejsz sobie strone w przeglądarce i zobacz co rozpycha
a rozpychają wszystkie elementy z ustawioną na stałe szerokością - choćby width:960px w .site_body i width:990px w .site_head - po usunięciu tych dwóch już pasek przesuwania się zmniejsza, ale nadal rozpychają jakieś marginesy
samemu pokombinuj - w Chrome na F12 masz taką ikonkę telefonu - naciśnij ją
ustawiłem wcześniej w media queries .site_head {width:100%;} i .site_body {width:100%;}
ale nie wiem czemu to nie pomogło :/
Spróbuj coś typu
width:960px; max-width:100%;
dla containera. Powinno załatwić sprawę.