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

85

Есть ли способ смоделировать дисплей 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 в моей собственной среде.

Александр Рехштайнер
источник
2
Может быть полезно: stackoverflow.com/questions/12243549/…
JSuar
@Jsuar: К сожалению, это не так. Библиотека JavaScript, похоже, не работает с retina.js, а Opera, похоже, предназначена для мобильных устройств.
Alexander Rechsteiner
2
Попробуйте сделать все изображения, такие как ваш логотип, в SVG вместо png или jpg.
Seph

Ответы:

152

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, поэтому это может измениться.

Эндрюб
источник
2
Кто-нибудь знает, есть ли что-то подобное для Chrome?
Кшиштоф Романовски
@castus Не думаю, лучшее, что у вас есть, - это приближение, и я не думаю, что это помогает в медиа-запросах.
andrewb
@andrewb: Мне было интересно то же самое, потому что это улучшило мою репутацию (ура!). Возможно, он был проиндексирован в Google по частому поисковому запросу.
Александр Рехштайнер
@AlexanderRechsteiner На самом деле он был связан со страницей Smashing Magazine в Facebook и был распространен в Facebook довольно большим количеством людей. Спасибо, что приняли мой ответ!
andrewb
@ChristinaArasmoBeymer Да, может
Эндрюб
25

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

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

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

Урб Гим Там
источник
1
Я не смотрел на MediaQueries, но с точки зрения простого анализа качества изображения не вижу, насколько это полезно. Вам нужно увеличить количество пикселей X2, иначе вы не сможете визуально увидеть, какой контент готов для Retina, а какой нет. Я провел быстрый тест, и Chrome просто заставил веб-сайт google.com выглядеть маленьким, но, перейдя на Firefox, я обнаружил, что Google Doodle в то время не был плотностью пикселей Retina. Но, эй, если это сработает для людей, это означает пропустить безумно большой пользовательский интерфейс с конфигурацией Firefox!
andrewb
Да, дело здесь не в повышении качества изображения (это невозможно, поскольку физический экран остается с той же плотностью пикселей), а в том, чтобы быть уверенным, как разработчик без Retina Mac, вы все еще покрываете все основы.
Урб Гим Там
Если вы просто хотите проверить качество изображения, вам не нужно ничего делать, кроме увеличения масштаба браузера на 200%. Если вы хотите запускать медиа-запросы в Chrome, вы должны делать и масштабирование, и эмуляцию.
Michael McGinnis
@MichaelMcGinnis Я не могу эмулировать и увеличивать масштаб в Chrome, у вас получилось?
andrewb
Да @andrewb, похоже, нужны отдельные тесты. Когда я увеличиваю масштаб и затем имитирую, изображения снова становятся маленькими. Масштабирование при эмуляции не влияет на размеры изображения.
Michael McGinnis
14

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

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


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


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

введите описание изображения здесь

серое пятно
источник
Благодарю. Это несколько похоже на текущий Chrome. Является 2.5единственным магическое число для всех дисплеев Retina? Или с 2014 года увеличилось / уменьшилось? Изменить: Ах, это здесь
неприятный
10

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

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

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

JSuar
источник
Спасибо, маркер от developer.apple.com направил меня на верный путь. Как и этот другой ответ здесь, в Stack Overflow.
Alex Kendrick
7

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

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

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

Щелкните значок переключения режима устройства.

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

Выберите ноутбук с экраном HiDPI

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

user280109
источник
1

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

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

Simon_Weaver
источник
1

Google Chrome версии 80

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

введите описание изображения здесь

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

введите описание изображения здесь

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

введите описание изображения здесь

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

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

Дейл Вемисс
источник
Какой браузер или оборудование вы используете? Вы имеете в виду Mozilla вместо Bugzilla?
Майкл МакГиннис
-3

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

Filah
источник
Да, и вы можете запускать os x как виртуальную
машину
@filtah действительно не худшее предложение
Пол