Отзывчивый 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) удерживается вертикально. Но, когда я держу его в пейзажном представлении, появляются стрелки. Я пытаюсь не отображать их, пока сайт не будет поднят в виде планшета или больше?

Любые идеи?

Update 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

Вы уверены, что используете соответствующий медиа-материал?, Вы пробовали в ориентации свойство:

@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) {} 

Answer 2

Screen в медиа-запросах определяются как что-либо на экране, поэтому не печатаются, или другие аналогичные медиа. Ваш медиа-запрос говорит, что эти стили будут отображаться только на экране, а экран должен быть меньше 480 пикселей.

Скорее всего, когда вы наклоняете свой iPhone к пейзажу, он увеличивает пиксели за 480. Таким образом, все эти стили в этом блоке не применяются, а iPhone отображает стили по умолчанию, размер которых превышает 480 пикселей. Есть несколько способов решить эту проблему.

Вы можете увеличить значение пикселя max-width. Это может быть решение, к которому вам придется обратиться. Вам просто нужно быть осторожным, чтобы выбрать значение

• Вы не хотите, чтобы он был слишком низким. Если вы ориентируетесь только на iPhone для этого значения, то любые телефоны с большим экраном не будут иметь эти стили. Таким образом, вы бы вернуться к той же проблеме
• Вы не хотите это слишком высоко, потому что вы могли бы в конечном итоге случайно нацеливание несколько меньший экран ноутбуков, а затем вы уничтожили небольшую часть вашего UI

Крис опубликовал good article, относящийся к этому вопросу. У него много медиа-запросов, которые вы могли бы использовать для решения этой проблемы. Но это может стать немного тяжелым с запросами.

К сожалению, не существует запрос сделан еще, что цели только портативные устройства

Answer 3

Ширина ландшафта iPhone5 является 568px, поэтому изменить медиа запрос на что-то вроде: @media only screen and (max-width: 568px).

Возможно использование 768 в качестве точки останова для планшетов (портрет).