Почему не работают медиазапросы на некоторых компьютерах?

Question

[ligisayan]

Всем привет! Есть сайт на wordpress, где в собственной теме регистрирую стили bootstrap и собственные style через файл functions.php

// регистрируем стили
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

// регистрируем файл стилей и добавляем его в очередь
function register_plugin_styles() {
	wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
	wp_enqueue_style( 'bootstrap-css' );
	wp_register_style( 'style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'style' );
}

в style.css прописаны медиазапросы, причем последовательно он появляется позже bootstrap.css

.navbar-inverse .navbar-nav>li>a {
		padding: 34px 7px 38px;
	  }
@media screen and (min-width: 1310px) and (max-width: 1366px)  {
	.navbar-inverse .navbar-nav>li>a {
		padding: 34px 15px 38px;
	}
}
@media screen and (min-width: 1440px) {
	.navbar-inverse .navbar-nav>li>a {
		padding: 34px 10px;
	}
}
@media screen and (min-width: 1600px) {
	.navbar-inverse .navbar-nav>li>a {
		padding: 34px 15px;
	}
}
@media screen and (min-width: 1680px) {
	.navbar-inverse .navbar-nav>li>a {
		padding: 34px 20px;
	}
}
@media screen and (min-width: 1920px) {
	.navbar-inverse .navbar-nav>li>a {
		padding: 34px 31px;
	}
}

Но вот не могу понять - почему на некоторых компьютерах и ноутбуках медиазапросы срабатывают и через редактор кода видны (ноутбук 15 дюймов), а на некоторых нет, видны только медиазапросы бутстрап (ноутбук 13 - разрешение 1366px, комп с монитором 22 - разрешение 1920px) и соответственно не срабатывают..
на сервисах типа quirktools.com/screenfly/ отрабатывает на всех разрешениях

Comments

[Ярослав Иванов]

В хроме нажмите на F12 и справа вверху смотрите какое текущее разрешение в пикселях. Разрешение показывается когда изменяете размер окна браузера.

[ligisayan]

Ярослав Иванов: спасибо, я в курсе)) 1366 и 1920 если что

[Ярослав Иванов]

ligisayan: Если не секрет зачем так много медиа запросов ?)

[ligisayan]

Ярослав Иванов: это очевидно - для адаптивности

[Ярослав Иванов]

ligisayan: Для адаптива 3-х хватит. А у вас их будет 10-15 если еще и мобильная версия будет. Потом и интересуюсь зачем так много.

Answer 1

[Павел]

Ну очевидно, что "ноутбук 13, комп с монитором 22" не попадают в диапазон ширины от 1310 до 1366, поэтом для них запросы и не работают

Comments

[ligisayan]

Павел нет, не очевидно - у ноутбука разрешение 1366, но вы правы, я дописал не все запросы, чтобы такого непонимания вообще не возникло

[Павел]

ligisayan: вы лучше сайт покажите

[ligisayan]

Павел: ответ найдет, только почему не так - не понимаю. через f12 но ноуте 13 показывает разрешение 1366px (и всегда раньше так было), но медиа запрос берет между 1200px и 1310px @media screen and (min-width: 1200px) {} почему? - вообще не очевидно...

[Павел]

ligisayan: потому что ширина viewport - это не разрешение экрана. О чем я и написал в ответе. 13" - это никак не 1366, а 1200 максимум. 1366 - это 15" ноутбуки

[ligisayan]

Павел: хотите прикол? еще смешнее, что на том же компе, но уже в ie, а не chrome показывает разрешение 1366px, т.е. берет инфу с этого медиазапроса @media screen and (min-width: 1366px) {}
Такое ну вот кто мог предположить, если честно?

[Павел]

ligisayan: про ie забудьте вообще, в нем нет нормальных инструментов. В хроме отличная консоль и в файрфоксе

[Павел]

ligisayan: и еще раз повторюсь, не путайте РАЗРЕШЕНИЕ и ШИРИНУ экрана.. запомните навсегда, что это разные вещи. Возьмите FullHD телефон, FullHD планшет и FullHD монитор - разрешение одинаковое, но ШИРИНА viewport разная, для телефонов это обычно 320-425px, планшеты 768-1024px, ну а моник понятно 1920px. живите с этим и не путайте никогда. Медиа запросы в CSS работают по ширине экрана, а не по разрешению

[Ankhena]

Павел: что за ерунда про 13" максимум 1200?

ligisayan во-первых, у браузера есть прокрутка и могут быть поля, поэтому ширина вьюпорта не равно ширине экрана. Во-вторых, есть настройка (пкм по экрану, параметры экрана) масштабирующая шрифт и размер приложений и отображение в браузере. Так вот далеко не все приложения и браузеры ее понимают.
Часто на ноутах с большим разрешением экрана и маленькой диагональю эта настройка по умолчанию стоит 125%. В результате изменяется (в данном случае уменьшается) размер вьюпорта.

[ligisayan]

Ankhena W: да, вы правы- в хроме стоял масштаб 110%, который невооруженным глазом не заметишь. Спасибо!