Как протестировать веб-сайт для Retina на Windows без реального дисплея Retina?

Есть ли способ имитировать дисплей Retina в Windows для тестирования веб-сайта для дисплеев HiDPI, таких как Retina?

Я запускаю Windows на стандартном мониторе 24 "1920x1080. Вчера вечером я проверил свой веб-сайт на знакомых новых 15-дюймовых Retina MacBook Pro, и графика выглядела все расплывчатой (намного хуже, чем на обычном 15-дюймовом MacBook), в то время как шрифт был супер четким и резким, что делает логотип еще хуже из-за прямого сравнения.

Я следил за этим уроком, чтобы сделать мой сайт Retina готовым:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

Я использовал подход retina.js, так как у меня нет фоновых изображений.

Есть ли способ проверить, действительно ли это работает? Очевидно, я мог бы попросить моего друга использовать его Retina Notebook, но это не выполнимый рабочий процесс для меня. Я хочу иметь возможность по крайней мере грубо тестировать веб-сайты для совместимости Retina в моей собственной среде.

Ответ 1

about: config hack on Firefox

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

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

Скриншот:

Обновите свою страницу - бум, ваш медиа-запрос теперь пнул! Шляпы для Firefox для того, чтобы быть удивительными для веб-разработки! Heads up, не только теперь будет увеличен размер веб-сайта в два раза, пользовательский интерфейс Firefox также будет удвоен. Это удвоение или масштабирование необходимо, так как это единственный способ изучить все пиксели на экране стандартных пикселей.

Это отлично работает в Windows 7 с Firefox 21.0, а также в Mac OS X с Firefox 27.0.1.

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

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

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

Ответ 2

В версии Google Chrome "33.0.1720.0 Canary" вы теперь можете эмулировать устройства, такие как iPhone5 и другие, с большим набором параметров, таких как "Отношение пикселов устройства" , "метрики шрифта Android" "и" Эмуляция видового экрана ".

Нет необходимости в том, чтобы взломать Firefox больше - с трудом работать, в любом случае.

Спасибо команде разработчиков Google!!:)

Ответ 3

В chrome вы можете сделать это:

1) Откройте Chrome Developer Tools и нажмите на маленькую иконку "gear".

2) Затем выберите "Показать" Эмуляция "в ящике консоли".

3) Наконец, откройте "консольный ящик" в Инструментах разработчика и выберите Эмуляция. Установите Эмуляция экрана и установите Соотношение пикселей устройства до 2.5.

Ответ 4

Насколько я могу судить, это не возможно, кроме покупки устройства сетчатки.

Некоторые способы решения

Предлагается здесь:
- Если вы удвоились, размеры и пропорции изображений все те же, вы в значительной степени безопасны. Если у вас нет дисплея сетчатки для тестирования с, переключиться с медиа-запроса с соотношением пикселей на что-то Ширина на основе.
- Тестирование и устранение неполадок контента с высоким разрешением
  http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html
Как разработать для HiDPI ( "Retina" ) без Retina MacBook Pro
http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/
WordPress Retina Images
http://wpmu.org/wordpress-retina/

Менее релевантный

Как создать отзывчивый, подготовленный сетью веб-сайт
Как разработать для яблок Retina Displays
http://www.studiopress.com/design/retina-display-design.htm
Создание веб-сайтов для дисплеев Retina: создание друзей с пикселями
http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels
Как создать веб-сайт для отображения сетчатки?
как получить сетчатку-готовую?

Ответ 5

Текущий метод эмуляции дисплея Retina (HiDPI) с Google Chrome

1) " Щелкните правой кнопкой мыши" на веб-странице, затем выберите " Осмотреть", чтобы открыть инструменты разработчика Chrome

2) Нажмите значок Переключить режим устройства "

3) В раскрывающемся списке "Устройство" в верхней части экрана выберите " ноутбук с экраном HiDPI"

4) Теперь вы можете посмотреть, как веб-сайт будет выглядеть на экране Retina aka HiDPI.

Ответ 6

Я использую библиотеку изменения размера изображения для динамического создания изображений. Для версии 2x я добавляю динамический водяной знак во время отладки - это позволяет очень легко увидеть, действительно ли отображается изображение с высоким разрешением. Нашли это очень полезно.

Способ, которым это работает, будет варьироваться, поэтому не включая пример кода.

Ответ 7

Я не знаю, слишком ли это, я нажимаю ctrl и прокручиваю и запускает медиа-запрос. Я проверил его в bugzilla, и он работает. Я не уверен в масштабировании svg, поскольку он выглядит размытым, но это изображение svg.

Ответ 8

Если у вас есть Mac (или Mac OS x виртуальная машина), вы можете использовать эмулятор ios с xcode. он взорвал окно вдвое больше, поэтому его не так, как оно появляется в реальной жизни, но ясно покажет вам, если ваши изображения размыты или нет.