Запросы медиа-запросов с неправильной шириной

Я создаю отзывчивую страницу, и медиа-запросы стреляют с неправильным размером ширины. Я использую Chrome.

@media screen and (max-width: 1200px) {
 .logo-pic {
    display: none;
}
}

Например, это правило работает только при неправильном размере. Это правило срабатывает при 1320px, а не 1200px. У меня есть метатег для html на месте. Кажется, он стреляет в медиа-запрос 100 или около того, пиксель шире, чем обычно.

<meta name="viewport" content="width=device-width, initial-scale=1">

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

Я нашел знакомый вопрос о переполнении стека, но он остался без ответа.

Точка прерывания Media Queries при неправильном значении

Не знаете, в чем проблема?

Ответы

Ответ 1

Общей причиной этого является то, что вы увеличили окно браузера до размера, отличного от 100%. В своем браузере выберите раскрывающееся меню "Вид" и убедитесь, что оно установлено на 100%. Если вы увеличили или уменьшили масштаб изображения, это приведет к неправильному срабатыванию медиа-запросов.

И не беспокойся о том, чтобы чувствовать себя смущенным. Вероятно, это произошло, или произойдет со всеми.. но только один раз.

Чтобы избежать этой проблемы все вместе, вам следует рассмотреть возможность определения ваших медиа-запросов с использованием относительных единиц (em или rem, а не px).

Вы также можете установить настройку уровня масштабирования браузера на 100% при загрузке страницы с помощью javascript.

document.body.style.webkitTransform =  'scale(1)';
document.body.style.msTransform =   'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;

Ответ 2

У вас есть iframes (или модальные или более мелкие окна), загружающие один и тот же лист CSS в ваш медиа-запрос? Если это так, это проблема с кешем, и вам нужно связать файл CSS с немым параметром, например:

<link href="myCss.css?iframe=1" />

Чтобы загрузить файл css в качестве нового файла вместо того, чтобы брать кешированную версию... Надеюсь, я понятен:)

Ответ 3

Просто короткое дополнение, чтобы другие не могли искать дальше, даже если ответ дан здесь.

Мое масштабирование уже было установлено на 100%, и все еще проблема была там. Если вы испытываете то же самое, ответ прост: установите масштаб до 90% и вернитесь на 100%, et voila, точки останова по ширине, которую вы хотите "м".

Ответ 4

Вы можете использовать console.log($(window).width()); Проверьте в консоли, что ширина во время изменения размера и когда медиа-запрос применяет изменения....