如果你去here在 iPad 上,点击 Chapter1 > Chapter 1 > Get started...
您将在加载屏幕后看到第 1 章页面。
基本上,这是将 html 嵌入到由 HTML5 和 JavaScript 拉到一起的 iframe 中。此 iframe 中的 html 调用其自己的名为 other.css 的 css 表。将这一切整合在一起的 html 文件正在调用一个名为 styles.css 的样式表。
显然,我希望在纵向 View 中此 iframe 的内容区域比在横向 View 中小。我在 other.css 中使用 css:
@media only screen and (device-width: 768px) and (orientation:landscape) {
#content {background:green;}
}
@media only screen and (device-width: 768px) and (orientation:portrait) {
#content {background:blue;}
}
问题是它甚至没有看到肖像 CSS。我已经尝试了十几种不同的方法(这应该是正确的方法并且适用于对整个页面的 styles.css 调整)但它不会识别它。它只会使用景观。并不是说它不会看到媒体查询,它会拉取横向 CSS。但不会使用肖像。真的很奇怪。如果您在纵向和横向中看到背景为绿色,则忽略纵向。如果你看到蓝色,它正在工作。我怎样才能做到这一点?
如果我去掉横向 CSS,它会更喜欢默认的而不是纵向的。没有意义。 iframe 会不会在方向改变时阻碍它引入新的 CSS?
最佳答案
您应该定位最小或最大设备宽度,否则您将错过设备。
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
来自 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
这里有一个解释,为什么你可能甚至不应该那么具体 http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised
关于css - 只有横向模式适用于 iPad 纵向(CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13646497/