2016-05-05 2 views
2

У меня есть следующий код.Запрос СМИ не работает как ожидалось

@media only screen and (min-width : 320px) and (max-width : 500px) 

Я понятия не имею, почему это правило работает только до тех пор, 480px, это следующий код, я использую для определения размера окна.

jQuery(window).resize(function(){ 
    console.clear(); 
    console.log(jQuery(window).width()); 
}); 

выше JQuery является ТОЛЬКО ИСПОЛЬЗОВАНЫ перепроверить ОКНО

У меня есть <meta name="viewport" content="width=device-width, initial-scale=1"> Вопрос здесь правило работает только до тех пор, 480px не 500px, которые он должен.

+0

это может быть с учетом вертикальной полосы прокрутки, а – Sid

+0

Очевидный вопрос, но всегда стоит проверить - Есть ли у вас другой медиа-запрос elesewhere, что можно было бы перекрывая этот, например, '@media (мин-ширина: 480px) {} '. 480px - такая обычная минимальная ширина в запросах '@ media', так как это ширина ландшафта iphone 4, я считаю? –

+0

Без проблем, это на самом деле моя первая догадка. Я работаю с готовым шаблоном, поэтому должно быть другое сочетание медиа-запросов. Однако, проверяя консоль, мои стили не перезаписываются, но на самом деле не отображаются. И, например, если я изменяю max-width от 500 до 480, правило перестает работать на 460. есть этот странный 20px, что я не могу найти, где влияет. – Tony

ответ

0

Заменить @media only screen and (min-width : 320px) and (max-width : 500px) с

@media all and (min-width : 320px) and (max-width : 500px) 

Если вы используете screen, то он работает в соответствии с размерами экрана.

+0

Пробовал, все еще работает до 480px – Tony

Смежные вопросы