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

Я закодировал веб-страницу, предназначенную для отображения сетчатки. В настоящее время у меня нет монитора дисплея сетчатки.

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

Или есть мониторы (не Apple MacBook или iPad), которые похожи на дисплей сетчатки Apple?

Спасибо заранее.

ОТВЕТЫ

Ответ 1

about: config hack on Firefox

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

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

Скриншот:

26854390370_c7844dde05_z.jpg

Обновите свою страницу - бум, ваш медиа-запрос теперь пнул! Шляпы для 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, чтобы сделать трюк. В противном случае он не переключит изображения на копии с более высоким разрешением.