RWD - Różny rozmiar strony przy tej samej rozdzielczości

pytanie zadane 16 marca 2016 w HTML i CSS przez ScriptyChris Mędrzec (190,190 p.)

Robię pierwszą stronę w RWD. Ustawiłem sobie w Chrome Developer Tools emulację mojego telefonu (tzn. dodałem go jako customowy, bo na liście dostępnych urządzeń on nie występuje). Niby jest ok, ale co innego widzę na telefonie, a co innego w tym emulatorze - rozmiar strony jest inny (próbowałem różnych skal i to nie pomaga)

Na komputerze mam ekran o rozdzielczości 1680x1050px, co widać na screenach. Telefon ma 320x480px (aczkolwiek JS twierdzi, że jest 401px).

W obu przypadkach, w drugiej linijce na stronie (przy pomocy JavaScript) napisany jest aktualny rozmiar okna (jeśli to w czymś pomoże).

Screen z telefonu:

Screen z emulatora Google Chrome:

2 odpowiedzi

odpowiedź 16 marca 2016 przez Comandeer Guru (601,110 p.)
wybrane 16 marca 2016 przez ScriptyChris

Najlepsza

No i dobrze twierdzi, bo przecież musisz odjąć elementy interfejsu systemu i przeglądarki ;) Wówczas z 480 px zostaje Ci właśnie ok. 400.

Stąd przy RWD myślenie rozmiarami jest błędem – powinno się myśleć proporcjami → https://css-tricks.com/rems-ems/ https://css-tricks.com/rem-global-em-local/

komentarz 16 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli rozdzielczości są ok, to dlaczego w emulatorze okno, w którym znajduje się symulowany ekran telefonu jest większe niż rzeczywisty rozmiar ekranu (w emulatorze widać większą powierzchnię strony niż na telefonie)?

Na telefonie mam maksymalnie oddalony widok, a w emulatorze zmieniałem skalę i jedyny efekt, to zmiana rozmiaru całego (symulowanego) ekranu telefonu, a nie jego zawartości - czyli rozmiaru strony w tym symulowanym oknie.

Powinienem raczej w obu przypadkach (na telefonie i w tej symulacji) widzieć jednakowy rozmiar strony, ale w telefonie widzę mniej niż w tym symulatorze. To normalne?

komentarz 16 marca 2016 przez Comandeer Guru (601,110 p.)

A używasz meta[name=viewport]?

komentarz 16 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Tak:

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

komentarz 16 marca 2016 przez Comandeer Guru (601,110 p.)

Hmm… Wygląda jakby Chrome zamiast przeskalować stronę, po prostu ją zmniejszył. Jak odświeżysz stronę, to dalej tak jest?

BTW zauważ, że wynik z konsoli nie pokrywa się z wynikiem na stronie – rozdzielczości są różne.

komentarz 16 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Odświeżanie strony nic nie daje. W trybie horyzontalnym również strona w emulatorze chrome jest nieco szersza niż na telefonie.

zauważ, że wynik z konsoli nie pokrywa się z wynikiem na - stronie rozdzielczości są różne.

Właśnie nie wiem dlaczego tak jest. Da się to jakoś naprawić? Albo jaką rozdzielczość ustawić, żeby rozmiar strony w emulatorze zgadzał się z tym na telefonie?

komentarz 16 marca 2016 przez Comandeer Guru (601,110 p.)

Jak na moje oko, to jest błąd w emulatorze i średnio cokolwiek zdziałasz.

komentarz 16 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Znasz jakiś lepszy emulator niż ten w Google Chrome? Czy kodować bez tego?

komentarz 16 marca 2016 przez Comandeer Guru (601,110 p.)

Dobry emulator (jeśli nie lepszy) jest w lisku.

Albo po prostu USB debugging wprost na androidzie: https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en

komentarz 16 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Firefox faktycznie emuluje bliżej rzeczywistych wymiarów, ale 100% odwzorowania też nie ma :)

No nic, dzięki.

komentarz 16 marca 2016 przez Comandeer Guru (601,110 p.)

100% pokrycia nigdy nie będzie (bo emulator nigdy nie odwzoruje choćby interfejsu systemu mobilnego!).

odpowiedź 16 marca 2016 przez arces Pasjonat (17,700 p.)

Jak emulator w Google Chrome Ci nie działa spróbuj tego:

http://quirktools.com/

Dodatkowo strony buduje się mobile-frist, więc zacząłbym od telefonów i wraz z zwiększaniem się rozdzielczości dodawał jakieś bajery. Na razie widzę strona chyba tylko na testy RWD, bo prezentuje się kosmicznie :D Prawie jak lata 90 ubiegłego wieku :D

komentarz 16 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Stronę, a właściwie jej szablon, napisałem kilka miesięcy temu dla PC. Ale pojawiły się inne rzeczy i dopiero teraz mam czas, by zrobić całość - tzn. zacząć uczyć się na tym RWD i Angulara. Całość to będzie Single-Page-Application.

Wiem, że mobile-first, tzn. teraz wiem i chcę ten szablon przerobić na tą metodykę(?). To tylko wstępny szablon, dlatego taki karykaturalny :)