Вопрос по css, retina.js, retina-display, html – Как протестировать сайт для Retina на Windows без реального дисплея Retina?

78

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

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

Ваш Ответ

8   ответов
10

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

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

Предлагаемый здесь:

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

Тестирование и устранение неисправностей контента высокого разрешения
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 от 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

Как разработать сайт для отображения сетчатки?

как получить готовую сетчатку?

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

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

Да, и вы можете запустить OS X в качестве виртуальной машины в Windows filtah
ОП четко сказалв Windows Rahil Wazir
@filtah действительно не самое плохое предложение Paul
24

эмулируйте устройства, такие как iPhone5 и другие, с большим набором параметров, таких как «Соотношение пикселей устройства», «метрики шрифтов Android» и «эмуляция видового экрана»..

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

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

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

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

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

-1

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

Какой браузер или аппаратное обеспечение вы используете? Вы имеете в виду Mozilla вместо Bugzilla? Michael McGinnis
14

1) Откройте Chrome Developer Tools и нажмите на маленький значок «шестеренка».

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

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

7

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

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

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

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

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

148

about: config hack на Firefox

Вы действительно можете использовать Firefox:

Перейти к "about: config"Найти "layout.css.devPixelsPerPxИзмените его на желаемое соотношение (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, так что это может измениться.

Можно ли это сделать на Mac с Firefox? Christina
Кто-нибудь знает, есть ли что-то подобное для Chrome? Krzysztof Romanowski
@andrewb: мне было интересно то же самое, что это повысило мою репутацию (ууу!). Возможно, он был проиндексирован в Google для частого поискового запроса. Alexander Rechsteiner
@AlexanderRechsteiner На самом деле это было связано со страницей Facebook Smashing Magazine и было распространено вокруг Facebook довольно многими людьми. Спасибо, что приняли мой ответ! andrewb
@castus Не думаю, что лучшее, что вы получили, это увеличение, и я не думаю, что это пойдет в медиа-запросах. andrewb

Похожие вопросы