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

専用タグは下部にあります。最後から2番目の。

4

3 に答える 3

2

Screenメディア クエリでは、画面上のあらゆるものとして定義されるため、印刷やその他の同様のメディアではありません。メディア クエリは、これらのスタイルは画面にのみ表示され、画面は 480 ピクセル未満でなければならないと言っています。

iPhone を横向きに傾けると、ピクセルが 480 を超えて増加する可能性があります。そのため、そのブロック内のこれらのスタイルはすべて適用されず、iPhone は 480 ピクセルより大きい画面のデフォルト スタイルをレンダリングします。これを解決するにはいくつかの方法があります。

max-widthピクセル値を増やすことができます。これは、あなたが行かなければならない解決策かもしれません。値を慎重に選択する必要があります

  • あまり低くしたくありません。この値で iPhone のみをターゲットにすると、画面が大きい携帯電話にはこれらのスタイルが適用されません。だからあなたは同じ問題に戻るでしょう
  • 画面が小さいノートブックを誤ってターゲットにしてしまい、UI の一部を破壊してしまう可能性があるため、高すぎることは望ましくありません。

Chris はこれに関連する良い記事を投稿しました。彼は、これを解決するために使用できる多くのメディア クエリを持っています。しかし、それはクエリで少し重くなるかもしれません.

残念ながら、ハンドヘルド デバイスのみを対象とするクエリはまだ作成されていません。

于 2013-07-03T23:16:03.750 に答える
0

正しいメディアクエリを使用していますか?、方向プロパティを試しましたか?

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

または、iPhone 5 ではdevice-aspect-ratio の方が正確かもしれません。

@media screen and (device-aspect-ratio: 40/71) and (orientation : landscape) {}
于 2013-07-03T23:16:44.310 に答える
0

iphone5 ランドスケープの幅は 568 ピクセルなので、メディア クエリを次のように変更します @media only screen and (max-width: 568px)。

たぶん、768 をタブレット (縦長) のブレークポイントとして使用します。

于 2013-07-03T23:16:11.313 に答える