CSS Media Queries Unexpected behavior

Question

I’m getting some odd results with my tests. I’m using a dual monitor setup and while testing the media queries on the “main” monitor,everything works just fine width scaling the browser window etc. But when I move the browser to the secondary monitor, I’m getting orientation landscape back and the design switches to the “tablet mode”.

Windows 7 64

Chrome:

Gets orientation on secondary monitor

FF5:

Gets orientation on secondary monitor

Opera 11.5:

Gets orientation on All monitors

IE9:

Works as expected

Sample Code:

/* CSS Document */
* { margin:0px; padding:0px; }

#pc { background:red; }

@media (max-width:1280px) {
    #pc { background:white; }
    #pc2 { background:red; }
}

@media (max-device-width:1280px) and (orientation: landscape) {
    #pc { background:white; }
    #tablet_andr_ls { background:red; }
}

@media (max-device-width:1024px) and (orientation: landscape) {
    #pc { background:white; }
    #tablet_ipad_ls { background:red; }
}

@media (max-device-width:800px) and (orientation: portrait) {
    #pc { background:white; }
    #tablet_andr_pt { background:red; }
}

@media (max-device-width:768px) and (orientation: portrait) {
    #pc { background:white; }
    #tablet_ipad_pt { background:red; }
}

HTML Sample:

<div id="container">

    <div id="pc"><p>PC Huge</p></div>

    <div id="pc2"><p>PC Small</p></div>

    <div id="tablet_andr_ls"><p>Android Tablet: Orientation Landscape</p></div>

    <div id="tablet_ipad_ls"><p>iPad Tablet: Orientation Landscape</p></div>

    <div id="tablet_andr_pt"><p>Android Tablet: Orientation Portrait</p></div>

    <div id="tablet_ipad_pt"><p>iPad Tablet: Orientation Portrait</p></div>

    <div id="smartphone"><p>Smart phone</p></div>

</div>

Answer 1

Try using max-width and min-width instead of device-max-width, the min/max-width follows window size, the device-min/max-width will follow device size.