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

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



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



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

680   8  

8 ответов:

о программе: config hack на Firefox

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

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

скриншоты:

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

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

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

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

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

147  
2016-05-20 15:59:39

в версии Google Chrome "33.0.1720.0 Canary", теперь вы можете эмуляция устройств, таких как iPhone5 и другие с большим набором параметров, таких как "соотношение пикселей устройства", "метрики шрифтов android" и "эмуляция видового экрана".

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

спасибо Google dev team! !:)

24  
2013-11-27 12:48:09

в chrome вы можете сделать это с помощью:

1) Откройте Chrome Developer Tools и нажмите на маленький значок "gear". enter image description here

2) Затем выберите "Показать 'эмуляция' вид в консоли ящик." enter image description here

3) наконец, откройте "ящик консоли" в инструментах разработчика и выберите эмулятор. Набор повторить и выберите Отношение Пикселей Устройства в 2.5.

enter image description here

13  
2014-04-23 02:04:59

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

Какие-То Обходные Пути

Меньше Соответствующих

10  
2017-05-23 15:26:19

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

1)"Щелкните Правой Кнопкой Мыши" на веб-странице, затем выбираем "проверить " чтобы открыть инструменты разработчика Chrome

2) нажмите " Режим Переключения Устройства значок"

Click the Toggle Device Mode Icon

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

Select Laptop with HiDPI Screen

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

7  
2016-03-10 13:06:17

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

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

0  
2017-11-22 01:18:45

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

-1  
2014-09-24 20:33:24

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

-2  
2014-04-14 16:59:47

Comments

    Ничего не найдено.
Click here to cancel reply.