CSS媒体查询无法在ipad上工作(Bootstrap)

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(或Firebug for Firefox)中打开您的开发者控制台,然后输入document.body.offsetWidth并按Enter键.这将显示浏览器宽度的像素数量.继续添加/重新排列内容,直到您在各种设备上获得所需的体验.

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

我希望这有帮助.