响应式 CSS 无法正常工作？

Question

这里是网站：Website

我试图在移动视图中隐藏一些导航箭头。

这是 HTML...

<div id="nav_arrow">
     <a href="index.html"><img src="images/icons/arrow_left.png" width="60" height="44"></a>
</div>

这是 CSS...

#nav_arrow { display: none; }

媒体查询似乎输入正确。当手机 (iPhone 5) 垂直握持时，该样式有效。但是，当我在横向视图中握住它时，箭头会出现。我试图不让它们显示，除非该网站在平板电脑视图或更大的视图中被拉起？

有什么想法吗？

更新 1 这是我有媒体查询的 CSS 部分......

@media only screen and (max-width: 480px) {     

#nav { display:none;}
#secondary-nav { display:none; }
#footer-social { float:left; }
.jcarousel-skin-tango .jcarousel-next-horizontal { right:0; }
.jcarousel-skin-tango .jcarousel-prev-horizontal { right: 43px;}
.jcarousel-skin-tango .jcarousel-item { width: 300px !important; }
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 20px;}              
#latest-projects .block, #latest-posts .block, .programs .block { width:295px; height:inherit; }
#latest-projects .stack, #latest-posts .stack, .programs .stack { width:295px; height:274px; }
#latest-projects .block img, #latest-posts .block img, .programs .block img { width:283px; height:262px; }
#latest-projects .block .mask, #latest-posts .block .mask, .programs .block .mask { width:283px; height:261px; }
.nav-projects .viewall { display:none;}
#clients .block { width:298px;}
#clients .block img { width:298px;}
#info-block ul li > div { height: 85px; width: 270px; }
#latest-projects .block iframe, #latest-posts .block iframe, .programs .block iframe { width:283px; height:262px; }
.fix-fish-menu select { display:block; }
#menu { float: none; }
#clients .columns { padding-bottom:20px; }
.ribbon-front { left: 1px; }
.ribbon-edge-topleft, .ribbon-edge-bottomleft { display:none; }
#footer-social li { margin-right: 5px; margin-left: 0px; }
#top-panel .columns { margin-bottom:20px;}      
#contacts-form input[type=text], #contacts-form input[type=password], #contacts-form input[type=email] { width:130px;}
#contacts-form textarea { width: 290px; }
#contact-info li { width:275px; }
#latest-posts .mejs-container {width:265px !important;}
#latest-posts .block .text { height: 200px;}
#latest-posts .block { width:295px; height:274px; }
#nav_arrow { display: none; }
.link-icon { background-position: top: 100px; right: 100px; bottom: 100px; left: 60px; }

具体的标签在底部。倒数第二。

Answer 1

Screen 在媒体查询中被定义为屏幕上的任何内容，因此不是打印或其他类似媒体。您的媒体查询是说这些样式只会显示在屏幕上，并且屏幕必须小于 480 像素。

很有可能，当您将 iPhone 倾斜到横向时，像素会增加到 480 以上。因此，该块中的所有这些样式都不会应用，并且 iPhone 会呈现大于 480 像素的默认屏幕样式。有几种方法可以解决这个问题。

您可以增加max-width 像素值。这可能是您必须采用的解决方案。你只需要小心选择一个值

• 您不希望它太低。如果你只针对这个价值定位 iPhone，那么任何屏幕更大的手机都不会有这些风格。所以你会回到同样的问题
• 你不希望它太高，因为你最终可能会不小心瞄准一些小屏幕笔记本，然后你已经破坏了你的 UI 的一小部分

Chris 发布了与此相关的 good article。他有很多媒体查询可以用来解决这个问题。但这可能会让查询变得有点繁重。

很遗憾，目前还没有针对手持设备的查询

Answer 2

您确定您使用的是正确的媒体查询吗？您是​​否尝试过 orientation 属性：

@media only screen  and (min-device-width : 320px)  and (max-device-width : 568px)  and (orientation : landscape) {}

或者也许 device-aspect-ratio 对于 iphone 5 会更准确：

@media screen and (device-aspect-ratio: 40/71) and (orientation : landscape) {}

Answer 3

iphone5 横向的宽度是 568 像素，所以将您的媒体查询更改为： @media only screen and (max-width: 568px).

也许使用 768 作为平板电脑的断点（纵向）。