Meta viewport tag and css media queries

_x000D_ _x000D_ I have a problem with CSS media queries using together with meta viewport tag. I am making iPad webapp that will work inside standalone view on home screen. This is the CSS: .header_portrait { position: relative; top: 0px; left: 0px; background: #ccc; width: 1536px; height: 219px; } .header_landscape { position: relative; top: 0px; left: 0px; background: #fff; width: 1536px; height: 219px; } @media only screen and (max-device-width: 1024px) and (orientation:portrait) { .header_landscape { display: none; } } @media only screen and (max-device-width: 1024px) and (orientation:landscape) { .header_portrait { display: none; } } This is part of HTML : This is part of HTML : If I remove meta viewport tag from head orientation detection works fine. It seems that viewport mess up max-device-width so that CSS media query doesn't detect it as it should. Any help is greatly appreciated :)