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

克里斯发布了与此有关的good article。他有很多媒体查询可以用来解决这个问题。但是查询可能会有点沉重。

不幸的是，目前还没有针对手持设备的查询

Answer 2

iphone5格局的宽度为568像素，因此请将您的媒体查询更改为： @media only screen and (max-width: 568px)。

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

Answer 3

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

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

对于iphone 5，

或者设备宽高比会更准确：

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

响应式CSS无法正常工作？

3 个答案: