Poprawna obsługa "media queries"

Od dłuższego czasu męczę się z poprawnym ostylowaniem wersji mobilnej mojej strony. Ustaliłem sobie kilka "break point-ów" i stosując @media all and (min-width: xxx) and (max-width: yyy) staram się wszystko ustawić. Strona poprawnie wyświetla się w momencie skalowania okna przeglądarki, jednak gdy uruchamiam Device Mode Mobile Emulation od Chrome wszystko wygląda nie tak jak należy. Właściwie jakby przeglądarka odczytuje tylko jeden "break point" (i to nie pierwszy w kolejności tylko środkowy), a resztę pomija. Stąd moje pytanie czy w inny sposób powinienem obsługiwać rozdzielczości telefonów czy o co chodzi? Naturalnie jak będzie potrzebny kod to wrzucę w całości.

Dla przykładu. Z listy urządzeń wybieram Google Nexus 4 (384x640), a strona wyświetla się ze stylami dla 481-1024px (jedynie elementy są pomniejszone, jednak układ się nie zmienia. Moja deklaracja media queries wygląda w tym przypadku następująco:

@media only screen and (min-width: 280px) and (max-width: 480px), only screen and (min-device-width: 280px) and (max-device-width: 480px) {     //to powinno być
    //...
}
@media only screen and (min-width: 481px) and (max-width: 1024px), only screen and (min-device-width: 481px) and (max-device-width: 1024px) {    //to jest
    //...
}

Już nie wiem czy jakaś literówka i ze zmęczenia nie widzę, czy co jest :P

Serdecznie dziękuję za każdą pomoc. Jak potrzeba więcej kodu to niezwłocznie wkleję :)
Pozdrawiam

Kolejnym problemem jest to, że mój telefon ma 980px szerokości, teoretycznie powinien ładować się styl z

@media only screen and (min-width: 481px) and (max-width: 1024px), only screen and (min-device-width: 481px) and (max-device-width: 1024px) {

a ładuje się z

@media only screen and (min-width: 280px) and (max-width: 480px), only screen and (min-device-width: 280px) and (max-device-width: 480px) {

A nie masz przypadkiem przeglądarki ustawionej na np. 125%, albo coś? Ja na samym początku miałem podobny problem bo na lapku mam 1920x1080 i wkurzało mnie, ze wszystko jest takie małe i jak pierwszy raz bawiłem się media queries to sie mocno zdziwiłem:)

Możesz spróbować to zdebugować

console.log($(window).width());

Spróbuj jeszcze z tym:

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

Możesz odtworzyć problem na jsfiddle, to pomoże nam w rozwiązaniu problemu.

W komputerze, jak ustawiam okno na 980px to
console.log($(window).width());
daje poprawny wynik (czyt. 980). Jednak gdy wyświetlam stronę bezpośrednio na telefonie to ładowane są style z niższej rozdzielczości...

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
powoduje, że strona wcale nie jest wyświetlana na telefonie

Stronka stoi tutaj: http://sthcreative.pl/portfolio/ekoopal/index.php

PS. Mogę prosić jakiegoś moda o połączenie moich ostatnich 3 wiadomości? :)