Вопрос по webpage, retina-display – Как проверить веб-страницу, предназначенную для отображения Retina?

67

Я кодировал веб-страницу, предназначенную для отображения на сетчатке. В настоящее время у меня нет монитора дисплея сетчатки.

Есть ли какое-нибудь приложение-симулятор или инструмент для тестирования веб-страниц на сетчатку?

Или есть мониторы (не MacBook или iPad от Apple), которые аналогичны дисплею Retina от Apple?

Заранее спасибо.

Также есть ли сходство между мониторами высокой четкости и мониторами Retina? Sangam254

Ваш Ответ

5   ответов
0
body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

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

4

Вы можете добавить этот CSS. Все будет выглядеть в 2 раза больше, но его легко обнаружить, если возникнут какие-либо проблемы. Javascript Web Retina Emulator не работал для меня (размыто в Safari)

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

Увеличение: 200% относится к webkit, -moz для firefox, поэтому Safari / Chrome / Firefox будет работать, не уверен насчет IE.

Если вы примените -webkit-transform: scale (2), все будет выглядеть размытым, поэтому вам нужно использовать увеличение: 200%;

Как говорит Даниэль, один только этот код не справится с задачей, поскольку он не вызовет медиазапросы, которые переключают изображения на аналоги с более высоким разрешением. Изображения будут выглядеть размытыми, если вы не используете решение andrewb, которое изменяет соотношение пикселей.
4

Есть JavaScriptWeb Retina Emulator на GitHub.

Вы также можете использовать Opera Mobile Emulator для проверки пользовательских разрешений. Естьобъяснение как это сделать здесь.

Если у вас более старый компьютер Apple (без дисплея сетчатки), вы можете имитировать дисплеи сетчатки с помощью Quartz Debug, инструмента внутри XCode. Также в XCode вы можете тестировать устройства iOS с дисплеями Retina с помощью iOS Simulator.

18

Вы можете проверить с помощью браузера Chrome, чтобы проверить работоспособность дисплея сетчатки или нет, используйте это руководство

Open Chrome Browser and right click then click inspect element In the bottom bar you will find some tabs that console, search, emulation and rendering Click the tabs emulation, then pull up the bar tab as shown below Adjust according to the menu on the left, adjust the device, screen etc.

Пожалуйста, проверьте эту статью для подробного руководства:http://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html

Если на шаге 2 вы не можете увидеть панель у основания, нажмите клавишу Escape, при этом консоль разработчика все еще открыта. Это переключает панель вкладок внизу.
104

about:config hack on Firefox

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

Go to about:config Find layout.css.devPixelsPerPx Change it to your desired ratio (1 for normal, 2 for retina, etc.)

Screenshot:

Обновите свою страницу - бум, ваш медиа-запрос теперь запущен! Снимаю шляпу перед Firefox за отличную веб-разработку!

Это было сделано на Windows 7 с Firefox 21.0.

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

Zooming on Firefox & Edge

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

Отличный совет, работает на OSX Firefox 26.
@andrewb Да, Retina потребует 2 раза. Зависит от того, нужно ли вам что-либо сверх стандартного отношения px или конкретной цели. Если ваши изображения с высоким DPI являются более общими (то есть что-нибудь & gt; 1.0, а не конкретно устройства Retina), тогда 1.5 достаточно, если нет, поднимите его по мере необходимости.
На FF 31 / Win7 его установка на (+) 1.5 работает хорошо в зависимости от вашей таблицы стилей, не делая окно слишком большим. Хотя по умолчанию установлено значение -1, установка его в отрицательное значение, по-видимому, не вызывает отображение с более высоким DPI.
В моей версии Firefox, 24, по умолчанию установлено значение -1, поэтому просто установите его на -2. Или установите значение 2 для обратного эффекта, что также полезно.
Это странно, мой (FF 24 в OS X 10.7 и Win 7) не принимает значение -2 или, по крайней мере, не имеет значения. Мое значение по умолчанию было на самом деле -1, мне интересно, означает ли это, что нет масштабирующих вычислений или чего-то еще.

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