响应式网页设计：将平板电脑倾斜后，不会触发媒体查询

Question

我遇到以下问题：

1. 当我在设备上的纵向视图中加载页面时，会触发纵向媒体查询 - 正确
2. 当我将设备倾斜至风景时，会触发横向媒体查询 - 正确
3. 当我将设备倾斜回到肖像时，它仍会触发横向媒体查询 - NOT CORRECT

我的媒体查询如下所示：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    body, a, p, label, input, h1, h2, h3, h4, h5, h6, table, tr, td, div, textarea, button, span {
        font-size: 16px;
    }
}

@media only screen {
    body, a, p, label, input, h1, h2, h3, h4, h5, h6, table, tr, td, div, textarea, button, span {
        font-size: 11px;
    }
}

任何帮助将不胜感激！

Answer 1

我弄清楚问题是什么。我使用的是三星Galaxy Tab 10.1作为测试设备，在倾斜设备时一定有问题。我在我的Galaxy S2上试过它并且工作正常