Как протестировать веб-сайт для Retina на Windows без реального дисплея 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. он взорвал окно вдвое больше, поэтому его не так, как оно появляется в реальной жизни, но ясно покажет вам, если ваши изображения размыты или нет.