Question

我有以下媒体查询：

@media screen and (max-width: 480px) {

在我的Nexus 5上以纵向模式查看网站时，它看起来就像我想要的那样。但是，当我将手机转到横向模式时，它会显示完整的网站，而不是此媒体查询中指定的内容。

为什么会这样？我也试过了：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

这并没有解决问题。

Answer 1

实际上Nexus 5横向宽度 590px ，您已经给出最大宽度：480px ....

See the view-port sizes

您也可以像这样提供媒体查询： -

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) {
.class-name {}
}

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation :landscape) {
.class-name {}
}

它应该对你有用...试试这个

Answer 2

nexus 5的有效屏幕尺寸为360x598，因此在横向视口中，视口比媒体查询的最高端宽。您可以通过将最大宽度增加到599px来捕获连接5的横向方向。

@media screen and (max-width: 599px) { ... }

reference

媒体查询在横向上无法正常工作

2 个答案: