CSSメディアクエリで予期しない動作が発生する

Question

テストで奇妙な結果が得られました。私はデュアルモニタの設定を使用していると、 "メイン"モニタ上のメディアクエリをテストしている間、すべての細かい幅のブラウザウィンドウなどをスケーリングします。しかし、私はセカンダリモニタにブラウザを移動すると、デザインは「タブレットモード」に切り替わります。

のWindows 7 64

クローム：

がセカンダリモニタ上での向きを取得します

FF5：

がセカンダリモニタ上での向きを取得します

オペラ11.5：

は、すべてのモニタ上での向きを取得します

IE9：

作品として期待

サンプルコード：

/* 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サンプル：

<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

device-max-widthの代わりにmax-widthとmin-widthを使用すると、最小/最大幅がウィンドウサイズに追従し、デバイスの最小/最大幅がデバイスサイズに従います。