我正在尝试开发一个基于 Wordpress 网站的移动主题。
问题不是关于 Wordpress,而是为什么我的 CSS 代码以某种方式出现在,例如我的 GNexus(我也尝试过使用 Windows Phone),但在 iPad 上却完全不同,始终处于纵向模式。
特别是我正在尝试创建一个包含这些菜单语音的水平导航菜单:
- MENU(包含所有页面的折叠语音)
- 搜索表单(显示在导航栏中央的搜索表单)
- 语言选择器(与导航栏右侧对齐,带有自己的箭头以显示其他可用语言)
我在这里复制了我的代码:http://jsfiddle.net/S26zx/
我也在使用这个媒体查询:
@media only screen and (orientation : portrait) {
/* MY CSS CODE */
}
这些是两个版本之间的差异:http://i.imgur.com/frvvKzj.png
那么,为什么 iPad 会显示“菜单”已被点击等子声,而且子声是水平显示的?
在此先感谢您的帮助!
最佳答案
为不同的布局设置 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 媒体查询和纵向模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16982480/