Question

我的测试得到了一些奇怪的结果。我正在使用双显示器设置，并且在“主”显示器上测试媒体查询时，一切都可以很好地缩放浏览器窗口等。但是当我将浏览器移动到辅助显示器时，我将获得方向风景并且设计切换到“平板电脑模式”。

Windows 7 64

铬：

获取辅助监视器上的方向

FF5 ：

获取辅助监视器上的方向

Opera 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

尝试使用max-width和min-width代替device-max-width，最小/最大宽度遵循窗口大小，设备最小/最大宽度将遵循设备大小。

CSS媒体查询意外行为

1 个答案: