Как имитировать соотношение пикселей для тестирования медиа-запросов с помощью Google Chrome или Firefox В Windows?

хотя легко проверить различные разрешения экрана в Google Chrome, мне интересно, как разработчики могли бы проверить различные соотношения пикселей устройства, лежащие в основе следующих запросов css media.

/* Pixel ratio of 1. Background size is 100% (of a 100px image) */
#header { background: url(header.png); }

/* Pixel ratio of 1.5. Background-size is 1/1.5 = 66.67% (of a 150px image) */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    #header { background: url(headerRatio1_5.png); background-size: 66.67%; }

}

/* Pixel ratio of 2. Background-size is 1/2 = 50% (of a 200px image) */
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    #header { background: url(headerRatio2.png); background-size: 50%; }

}

существует ли какой-либо способ или расширение браузера для имитации соотношения пикселей устройства?

32
css media-queries testing

5 ответов

about: config hack on Firefox

вы действительно можете использовать Firefox:

  1. перейти к "about: config"
  2. найти "макет.стиль CSS.devPixelsPerPx
  3. измените его на желаемое соотношение (1 для нормального, 2 для сетчатки и т. д.)

обновите свою страницу-бум, ваш медиа-запрос теперь сработал! Шляпы от Firefox для того, чтобы быть удивительным для веб-разработки!

Это было сделано в Windows 7 с Firefox 21.0.

масштабирование в Firefox & Edge

В настоящее время в Firefox и Edge, если вы увеличиваете масштаб, он запускает медиа-запросы на основе dppx. Таким образом, этот более простой подход может быть достаточным, но имейте в виду, что функциональность сообщается как "не исправит" ошибка для Firefox, так что это может измениться.

44

у Chrome DevTools есть функция под названием "Режим устройства и мобильная эмуляция", доступная в Chrome 32 и выше. подробно описано здесь. Вот видео уроке из канала Google DevBytes YouTube.

откройте DevTools, нажав F12 (или Shift + Ctrl+I / Cmd+Opt+I на Mac). В текущих версиях Chrome нажмите кнопку "смартфон" значок в верхнем левом углу DevTools окно для активации мобильной эмуляции. Вы можете изменить большинство настроек (Тип устройства, разрешение, соотношение пикселей, пользовательский агент...) на панели инструментов на экране эмуляции. Для получения дополнительных параметров нажмите "..." в правой части панели инструментов.

в более старых версиях Chrome вам может потребоваться включить эту функцию, прежде чем вы сможете ее использовать: в DevTools нажмите настройки значок (зубчатое колесо), затем нажмите "переопределяет" и выберите "Показывать 'Эмуляция' вид в ящике консоли". Затем нажмите ">=" значок слева от значка настроек, чтобы показать "ящик консоли", и вы должны увидеть "эмуляция" вкладка, на которой можно включить эмуляцию и изменить настройки.

18

Volker E. правильно в том, что медиа-запросы с соотношением пикселей не будут запускаться.

тем не менее, можно хотя бы просмотреть внешний вид (чтение: масштабирование) медиа-запросов для устройств, которые 1.5 x, 2x и т. д.

просто укажите желаемое разрешение в инструментах Chrome Dev и убедитесь, что выбрано" Fit In window". Затем измените размер окна браузера соответствующим образом.

enter image description here

пример: to эмулируйте Galaxy Nexus в ландшафтном режиме, просто введите 720x1280 в качестве размеров,а затем измените размер окна браузера на 640px. Вуаля! Теперь вы эмулировали соотношение пикселей 2x устройства.

(ширина устройства [в пикселях]) ÷ (отношение пикселей устройства) = размер вашего окна должен быть

4

derrylwc имеет хорошее предложение, но не включает инструкции:

  • откройте инструменты разработчика (ctrl-shift-i или command-alt-i)
  • нажмите шестеренку в правом нижнем углу для настройки
  • выберите вкладку" переопределяет " (слева)
  • нажмите "Включить"и" включить при запуске DevTools"
  • Проверьте "метрики устройства" и настроить. "Масштабный коэффициент шрифта" - это отношение пикселей устройства.
1

вы просто можете проверить медиа-запрос, соответствующий соотношению пикселей устройства на вашем конкретном устройстве, вы смотрите на его браузер во время тестирования.
Отношение пикселей устройства-это определенное устройством неизменяемое число, поскольку оно учитывает доступные физические пиксели устройств. См.исследование ppk на devicePixelRatio

это невозможно имитировать другое соотношение пикселей устройства чем самого устройства. Еще вы может курить проверить ваш код f.e. достаточно просто применить другое правило запроса мультимедиа.

заботиться о min-device-pixel-ratio: 1.5 как новые устройства HDPi, такие как Nexus 7 имеют 1.3 устройство пикселя соотношение.

-3