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

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

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

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

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

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

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

about: config hack в Firefox

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

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

Скриншот:

Обновите свою страницу - бум, ваш медиа-запрос запущен! Снимаю шляпу перед Firefox за то, что он отлично подходит для веб-разработки! Внимание! Теперь не только размер веб-сайта увеличится вдвое, но и увеличится вдвое пользовательский интерфейс Firefox. Это удвоение или масштабирование необходимо, так как это единственный способ просмотреть все пиксели на экране со стандартным соотношением пикселей.

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

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

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

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

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

В этом взломе Firefox больше нет необходимости - все равно сложно работать.

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

В хроме это можно сделать следующим образом:

1) Откройте Инструменты разработчика Chrome и щелкните маленький значок «шестеренки».

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

3) Наконец, откройте «ящик консоли» в инструментах разработчика и выберите « Эмуляция» . Установите Emulate screen и установите Device Pixel Ratio на 2,5.

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

Некоторые обходные пути

• Предлагается здесь:

  • Если вы удвоили размеры изображения и пропорции остались прежними, вы в значительной степени в безопасности. Если у вас нет дисплея Retina для тестирования, переключитесь с медиа-запроса с соотношением пикселей на что-то основанное на ширине.

  • Тестирование и устранение неполадок контента высокого разрешения
    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
  http://wpmu.org/wordpress-retina/

Менее актуально

• Как создать адаптивный веб-сайт с поддержкой Retina

• Как разработать дизайн для дисплеев Retina от Apple
  http://www.studiopress.com/design/retina-display-design.htm

• Создание веб-сайтов для дисплеев Retina: подружиться с пикселями
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

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

• как подготовиться к сетчатке?

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

1) « Щелкните правой кнопкой мыши » на веб - странице , затем выберите « Проверить » в Developer Tools Open в Chrome

2) Щелкните значок « Переключить режим устройства ».

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

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

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

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

Google Chrome версии 80

1. Откройте Инструменты разработчика ctrl-shift j
2. Переключите панель инструментов устройства, щелкнув значок планшета / телефона в левом верхнем углу (он станет синим, если вы щелкните по нему)

3. Теперь над окном просмотра должна быть панель инструментов. Щелкните значок параметров (3 точки) в правом верхнем углу и выберите параметр « Добавить устройство в пикселях» .

4. Теперь вы должны увидеть опцию на панели инструментов. Отсюда вы можете переключиться на 1x, 2x или 3x.

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

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

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