HTML/CSS div większy niż rozdzielczość urządzenia sprawdzone w F12

Question

Witam,

tak jak widać na zdjęciu, ustawiam rozdzielczość urządzenia na 360x640, natomiast mój div, jest większy niż ta rozdzielczość? Dlaczego? Jakiej mogę użyć właściwości, aby body było wielkości takiej jak dana rozdzielczość? Stanowi to duży problem, ponieważ media queries stają się teraz bardzo kłopotliwe. Może jakiś box-sizing? Z góry dziękuję za odpowiedzi. 

Poniżej link do zalążka strony:

http://orfi.uwm.edu.pl/~s135932/PAWWW/Projekt1/

Answer 1

Dodaj do head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Powinno pomóc

Comments

Dziękuję bardzo! Pomogło! Jedna linijka a tak cieszy! ;>

Answer 2

określanie rozmiarów w vw (szerokość) i vh (wysokość)

pozwoli określić rozmiary względem rozdzielczości okna przeglądarki, a nie obiektu nadrzędnego (rodzica), jak to robi %
z % powinno działać, ale vw i vh dają 100% pewność że będzie dokładnie taki rozmiar jak ma być

do tego za pomocą jak dobrze pamiętam media w css, możesz ustawić osobne css dla określonych rozdzielczości, czyli jeśli rozdzielczość pasuje do urządzenia mobilnego, używa stylów dla urządzeń mobilnych
możesz zrobić w ten sposób łatwo osobne css dla komputerów, tabletów i telefonów

+w css brakuje ci "resetowania css" (ustawienie marginesów itp na 0px, bo przeglądarka domyślnie ustawia swoje)

co prawda nie zajmuje sie frontem i za dużo nie pomoge, ale to takie podstawowe błędy (według osoby od backendu błędy) które zauważyłem

+niektóre elementy wyglądają troche "januszowo", np ta animacja przyciemniająca tło, dużo obramowań itp 
jeśli dopiero zaczynasz to ok, od czegoś trzeba zacząć, jednak staraj się tego unikać, możesz popatrzeć jak to wygląda na "profesjonalnych" stronach (wpisujesz w google coś typu "best css3", "best html" itp, albo wchodzisz na strony powiązane w jakimś stopniu w IT, przykładowo atom.io) i spróbować wzorować się / podłapywać patenty / sprawdzać co jest modne i dobrze wygląda 

Comments

Po zamienieniu width z body i z kontenera z vw na % dalej problem występuje.
Dodatkowo media-query działa normalnie, gdy sam zmienie rozmiar okna przeglądarki. Natomiast, gdy ustalę rozdzielczość w F12 to już niestety tak kolorowo nie jest. Na telefonie również wyświetla się tak jak w F12. 
Po lewej widok z F12, po prawej widok gdy sam zmienie rozmiar okna przeciągając jego krawędź. Skąd wynika ta rozbieżność?

Nie wspominając już o tym, że tło po lewej jest tak jakby bardziej zagęszczone. Powinno wyglądać jak po prawej.