css - CSS媒体查询不适用于ipad景观（引导程序）

Question

我正在为我的网站使用以下媒体查询

        @media (max-width: 976px) {}

我发现当我查看我的网站时

   http://46.32.253.11/ 

在横向模式下的 ipad 3 上，纵向模式下出现的导航栏按钮不起作用，我的导航栏分为 2 行。

我需要添加另一个媒体查询，还是可以编辑现有的。如果是这样，我需要做些什么改变。

我对媒体查询真的很陌生，所以如果有人有他们想分享的优秀资源，那就太好了

Answer 1

看看这篇 css-tricks 文章，它有一个标准设备分辨率的引导程序：http: //css-tricks.com/snippets/css/media-queries-for-standard-devices/

下面列出了特定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 */
}

不过，我想强调的是，从“移动优先”的方法来看，您不应该为设备设计，而应该为适合您设计的分辨率断点设计。尝试从一个很小的分辨率开始，比如 320 x 480。从那里开始，增加浏览器的宽度，直到该设计“中断”（即看起来像废话），然后在该分辨率下添加一个断点。检查浏览器宽度的一种方便方法是在 Chrome（或 Firefox 的 Firebug）中打开您的开发者控制台，然后输入document.body.offsetWidth并按 Enter。这将显示浏览器宽度的像素量。继续添加/重新排列内容，直到您在各种设备上获得所需的体验。

网络正在向前发展。这意味着我们必须从智能手机一直考虑到电视和投影仪。考虑到这一点来设计您的网站。

我希望这有帮助。