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

Question

我正在使用bootstrap构建一个客户端的网站，当我尝试在移动设备上定位横向和纵向方向时，我已经失败了，以便为两个视口添加一些特定的样式。如何针对移动样式定位纵向和横向？我需要在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}