Question

我正在尝试开发基于Wordpress网站的移动主题。

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

特别是我正在尝试创建一个包含这些菜单声音的水平导航菜单：

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

我也在使用这个媒体查询：

@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 */
}

CSS媒体查询和纵向模式

1 个答案: