Show/Hide div 在横向模式下的移动视图中

Question

我的网站针对移动设备、平板电脑和桌面设备进行了不同的设计。我正在使用媒体查询 hide/show div。在纵向模式下一切正常。我该如何在横向模式下处理这个问题？由于横向模式下宽度像素的增加，手机正在占用平板电脑设计。

Answer 1

根据回答：

CSS 检测屏幕方向：

@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }

媒体查询的 CSS 定义位于 http://www.w3.org/TR/css3-mediaqueries/#orientation

可以在此处找到有关此解决方案局限性的进一步讨论，主要是软键盘会破坏布局：

CSS Media Query - Soft-keyboard breaks css orientation rules - alternative solution?

正如最近的评论所指出的，您应该考虑将最小-最大像素限制与方向相结合的因素。然而，w3 文章仍然是一个很好的信息来源。

Answer 2

试试这个，希望对你有帮助

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

Show/Hide div 在横向模式下的移动视图中

Show/Hide div in mobile view in landscape mode

css

media-queries

twitter-bootstrap