Есть ли способ смоделировать дисплей 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:
Скриншот:
Обновите свою страницу - бум, ваш медиа-запрос запущен! Снимаю шляпу перед 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.
источник
2.5
единственным магическое число для всех дисплеев Retina? Или с 2014 года увеличилось / уменьшилось? Изменить: Ах, это здесьНасколько я могу судить, это невозможно, кроме как купить устройство 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
ctrl-shift j
источник
Я не знаю, слишком ли это просто, я нажимаю ctrl и прокручиваю, и он запускает медиа-запрос. Я проверил это в bugzilla, и он работает. Я не уверен в масштабировании svg, поскольку оно выглядит размытым, но это изображение svg.
источник
Если у вас есть Mac (или виртуальная машина Mac OSX), вы можете использовать эмулятор ios с xcode. он действительно увеличивает окно вдвое, так что это не то, как оно выглядит в реальной жизни, но ясно покажет вам, размыты ли ваши изображения или нет.
источник