我的测试得到了一些奇怪的结果。我正在使用双显示器设置,在“主”显示器上测试媒体查询时,一切正常,缩放浏览器窗口等。但是当我将浏览器移动到辅助显示器时,我得到了方向横向并且设计切换到“平板模式”。
视窗 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>