CSS 媒体查询不适用于 ipad 横向（引导程序）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11561435/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS media Query not working on ipad landscape (Bootstrap)
提问by Richlewis
I am using the following media query for my site
我正在为我的网站使用以下媒体查询
@media (max-width: 976px) {}
I am finding that when i view my site
我发现当我查看我的网站时
http://46.32.253.11/
on the ipad 3 in landscape mode the navbar button that appears in portrait mode doesn't work and my navbar is split over 2 lines.
在横向模式下的 ipad 3 上，纵向模式下出现的导航栏按钮不起作用，我的导航栏被分成 2 行。
Do i need to add another media query, or can i edit the existing one. If so what changes would i need to make.
我需要添加另一个媒体查询，还是可以编辑现有的。如果是这样，我需要做出哪些改变。
Im really new to media queries so if anyone has an excellent resource they would like to share that would be great
我对媒体查询真的很陌生，所以如果有人有他们想分享的优秀资源，那就太好了
回答by Nick Beranek
Have a peek at this css-tricks article which has a bootstrap for standard device resolutions: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
看看这篇 css-tricks 文章，它有一个标准设备分辨率的引导程序：http: //css-tricks.com/snippets/css/media-queries-for-standard-devices/
There are specific media queries for landscapeand portraitlisted below:
具体有媒体查询了landscape和portrait如下：
/* 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 */
}
I want to stress, though, that from a "mobile-first" approach, you shouldn't be designing for devices, but rather for resolution breakpoints that fit your design. Try starting with a very small resolution, like 320 x 480. From there, increase the browser width until that design "breaks" (i.e. looks like crap) and then add a breakpoint at that resolution. A handy way of checking the browser width is to open up your developer console in Chrome (or Firebug for Firefox) and typing in document.body.offsetWidthand hitting enter. That will show the pixel amount of the width of the browser. Keep adding / rearranging things until you get the experience you want on a wide range of devices.
不过，我想强调的是，从“移动优先”的方法来看，您不应该为设备进行设计，而应该为适合您的设计的分辨率断点进行设计。尝试从非常小的分辨率开始，例如 320 x 480。从那里开始，增加浏览器宽度，直到该设计“中断”（即看起来像废话），然后在该分辨率下添加断点。检查浏览器宽度的一种方便的方法是在 Chrome（或 Firebug for Firefox）中打开您的开发者控制台，然后输入document.body.offsetWidth并按 Enter。这将显示浏览器宽度的像素数量。不断添加/重新排列内容，直到您在各种设备上获得所需的体验。
The web is moving forward. This means that we have to think about smartphones all the way up to TVs and projectors. Design your site with that in mind.
网络正在向前发展。这意味着我们必须考虑从智能手机到电视和投影仪。考虑到这一点来设计您的网站。
I hope this helps.
我希望这有帮助。
