在横向模式下以移动视图显示/隐藏div

Question

我在网站上针对移动设备，平板电脑和台式机的设计有所不同。我正在使用mediaquery隐藏/显示div。在人像模式下一切正常。如何在横向模式下处理此问题？由于横向模式下宽度像素的增加，手机正在采用平板电脑设计。

Answer 1

根据Media 2 Service specs

上的答案

用于检测屏幕方向的CSS：

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

媒体查询的CSS定义位于https://stackoverflow.com/a/5735636/5580153

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

http://www.w3.org/TR/css3-mediaqueries/#orientation

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

Answer 2

尝试一下，希望对您有帮助

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