Медиа-запросы не точны

Question

Я использую Google Chrome в качестве браузера по умолчанию для кодирования и некоторое время назад заметил странное поведение, но сегодня я хочу знать, верно ли это.

Простой пример: мой медиа-запрос настроен какthis:

@media (max-width: 1350px) {
    th.column-hidden, td.column-hidden {
      display: none;
    }
}

Исходя из этого, столбец с указанным классом не должен отображаться до тех пор, пока не будет достигнута точка 1350px.

Когда я изменяю размер своего экрана браузера, я вижу индикатор вверхуправый угол, и столбец исчезает на отметке 1215 пикселей.Что может быть причиной этой неточности?

Одна вещь, которую я заметил, это то, что мое разрешение экрана macbook 2560x1600, но www.whatismyscreenresolution.com показывает 1440x900

edit Я только что ввел пример другой страницы, которая использует медиа-запросы, и они точные.И они действительно отличаются.

Answer 1

Попробуйте использовать соотношение пикселей следующим образом:

/* 1.25 dpr */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    /* Retina-specific stuff here */
}

/* 1.3 dpr */
@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi) {
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    /* Retina-specific stuff here */
}

Answer 2

Физическое разрешение вашего MacBook на самом деле составляет 1440x900.Сетчатый аспект дисплея означает, что он имеет более высокое значение DPI (точек на дюйм), что делает его более высоким разрешением.Браузеры влияют не на DPI, а на ваше физическое разрешение.