css - 响应式 CSS 无法正常工作？

Question

这是网站:Website

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

这是 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) 垂直握持时，此样式有效。但是，当我在横向 View 中握住它时，箭头会出现。我试图不让它们显示，除非网站在平板电脑 View 或更大的 View 中被拉起？

有什么想法吗？

更新 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。因此，该 block 中的所有这些样式都不会应用，并且 iPhone 会呈现大于 480 像素的屏幕的默认样式。有几种方法可以解决这个问题。

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

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

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

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