1

这是网站：网站

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

这是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; }

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

4

3 回答 3

2

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

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

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

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

克里斯发表了一篇与此相关的好文章。他有很多媒体查询可以用来解决这个问题。但这可能会因查询而变得有点繁重。

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

于 2013-07-03T23:16:03.750 回答
0

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

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

于 2013-07-03T23:16:11.313 回答
0

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

@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) {}
于 2013-07-03T23:16:44.310 回答