CSS媒体查询和纵向模式

Question

我试图开发一个基于Wordpress网站的移动主题。

问题不在于Wordpress，而是为什么我的CSS代码以某种方式出现，例如我的GNexus (我也尝试过使用Windows )，但在iPad上却完全不同，总是以纵向模式出现。

特别是，我试图创建一个水平导航菜单，其中包含以下菜单声音：

• 菜单(包含所有页面的折叠语音)
• 搜索表单(显示在导航栏中心的搜索表单)
• 语言选择器(与导航栏的右侧对齐，并有自己的箭头显示其他可用语言)

我在这里复制了我的代码：http://jsfiddle.net/S26zx/

我还使用了这个媒体查询：

@media only screen and (orientation : portrait) {
/* MY CSS CODE */
}

这是两个版本之间的区别：http://i.imgur.com/frvvKzj.png

那么，为什么iPad显示像“菜单”这样的子声音已经被点击了，为什么这个子声音是水平显示的呢？

提前感谢您的帮助！

Answer 1

为不同的布局设置CSS。

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}