如何定位移动设备的横向和纵向

Question

我正在使用引导程序来构建客户的网站，当尝试在移动设备上定位横向和纵向方向以便为两个视口添加一些特定样式时，我没有遇到麻烦。 如何针对移动样式定位纵向和横向方向？ 我需要在320px断点处添加特定样式，并在480px断点处添加某些样式。 对于我当前的媒体查询，这不起作用当前在样式表中，我具有以下内容：

/* portrait phones */
@media only screen and (max-width: 320px) and (orientation:portrait) {
    /* Styles */
}

/* landscape phones */
@media only screen and (min-width: 321px) and (orientation:landscape) {
/* Styles */
    }

如果我将样式用于景观，那么我认为它们不会被采用。 每次进行更改然后刷新Iphone时，我都看不到任何区别。 我想也许我的媒体查询错了？ 如果有更好的方法来定位移动状态，我将不胜感激。

Answer 1

最后，我通过为321px媒体查询添加最大宽度来解决此问题，并且能够同时定位横向和纵向移动方向。 我还在标头中发现： initial-scale=1 ，这似乎是造成问题的原因，在将其删除后，我能够瞄准所需的移动断点。

/*Portrait phones */
@media (max-width:320px){}

/* Landscape phones and down */
@media (min-width: 321px) and (max-width: 480px) {}

Answer 2

尝试使用：

@media (orientation: portrait) and (max-width: 400px) {Fooobar}

@media (orientation: landscape) and (max-width: 400px) {foobar}