CSS Media Queries意外的行爲

我的測試中遇到了一些奇怪的結果。我正在使用雙顯示器設置，並在「主」顯示器上測試媒體查詢時，所有功能都可以很好地縮放瀏覽器窗口等。但是，當我將瀏覽器移動到輔助顯示器時，並且設計切換到「平板模式」。CSS Media Queries意外的行爲

視窗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>

來源

2011-07-06 petsoukos

您希望有多少訪問者擁有雙顯示器設置？請把時間花在有趣的事情上，而不是試圖找出邊緣案例問題。 – Gerben

瘋狂的問題：你的屏幕設置是否像一臺帶有一個分辨率的大顯示器或兩臺帶有自己分辨率的顯示器？我已經看到了這兩個設置。 –

2具有擴展桌面的監視器。主要是27「2560x1440和次要的是一個較小的19」1280x1024。我想這是一個大型桌面。 – petsoukos

嘗試使用max-width和min-width而不是device-max-width，最小/最大寬度遵循窗口大小，設備最小/最大寬度將遵循設備大小。

來源

2011-08-17 13:11:09 JKirchartz

CSS Media Queries意外的行爲

回答

相關問題