Как протестировать веб-страницу для отображения Retina?

Ответ 1

about: config hack on Firefox

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

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

Скриншот:

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

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

Преимущество этого решения заключается в том, что он инициирует запросы к мультимедиа и другую расширенную логику. Если вы этого не делаете, и вы просто кормите всех изображениями HiDPI, вы можете просто увеличивать масштаб с помощью Chrome и т.д. (Или писать CSS для увеличения для вас, если это плавает на вашей лодке).

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

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

Ответ 2

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

• Откройте Chrome Browser и right click, затем нажмите inspect element
• В нижней строке вы найдете несколько вкладок, которые console, search, emulation and rendering
• Щелкните вкладки emulation, затем потяните вкладку панели, как показано ниже.
• Отрегулируйте в соответствии с меню на left, отрегулируйте устройство, экран и т.д.

Пожалуйста, ознакомьтесь с этой статьей для подробного руководства: http://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html

Ответ 3

В GitHub есть JavaScript Web Retina Emulator.

Вы также можете использовать Opera Mobile Emulator для проверки пользовательских разрешений. Там объяснение, как это сделать здесь.

Если у вас старый компьютер Apple (без дисплея сетчатки), вы можете имитировать сетчатые дисплеи с Quartz Debug, инструментом внутри XCode. Также в XCode вы можете протестировать устройства iOS с сетчатыми дисплеями с помощью iOS Simulator.

Ответ 4

Вы можете добавить этот css. Все будет выглядеть в 2 раза больше, но это позволяет легко определить, есть ли какие-либо проблемы. Эмулятор Javascript Web Retina не работал у меня (размыто в Safari)

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

Масштабирование: 200% применяется к webkit, -moz для firefox, поэтому Safari/Chrome/Firefox это будет работать, не уверен в IE.

Если вы примените -webkit-transform: scale (2), все будет выглядеть размытым, поэтому вам нужно использовать масштаб: 200%;

Ответ 5

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

Только этот код не будет делать трюк. Если вы используете медиа-запросы, вам нужно переключить соотношение пикселей на 1, а не на 1,5 или 2, чтобы сделать трюк. В противном случае он не переключит изображения на копии с более высоким разрешением.