Подтвердить что ты не робот

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

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

/* 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%; }

}

Существует ли какой-либо способ или расширение браузера, чтобы имитировать соотношение пикселей устройства?

4b9b3361

Ответ 1

about: config hack on Firefox

Фактически вы можете использовать Firefox:

  • Перейдите в раздел "about: config"
  • Найти "layout.css.devPixelsPerPx
  • Измените его на желаемое соотношение (1 для нормального, 2 для сетчатки и т.д.).

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Просто укажите требуемое разрешение в Chrome Dev Tools и убедитесь, что выбрано "Fit in window". Затем измените размер своего окна браузера соответствующим образом.

enter image description here

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

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

Ответ 4

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

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

Ответ 5

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

Так что в основном невозможно подражать другому соотношению пикселей устройства, чем собственное устройство. Тем не менее вы можете smoke test ваш код f.e. а просто применяя другое правило запросов СМИ.

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