Як протестувати веб-сайт на 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

Я використовував підхід retina.js, оскільки у мене немає жодних фонових зображень.

Чи є у мене спосіб перевірити, чи це насправді працює? Очевидно, я міг попросити свого друга скористатися його зошитом Retina, але це не є здійсненним робочим процесом для мене. Я хочу мати можливість принаймні приблизно перевірити веб-сайти на сумісність Retina у своєму власному середовищі.

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

У версії Google Chrome "33.0.1720.0 Canary" тепер ви можете емулювати такі пристрої, як iPhone5 та інші, з великим набором параметрів, таких як "Піксель пристрою", "Метрики шрифтів Android" та "Емуляція Viewport" .

У цьому хакерстві Firefox більше немає потреби - і так важко працювати.

Дякуємо розробнику Google! ! :)

У chrome ви можете це зробити, виконавши:

1) Відкрийте Chrome Developer Tools та натисніть на маленький значок "шестерні".

2) Потім виберіть "Показати вигляд" Емуляція "у шухляді консолі."

3) Нарешті, відкрийте "шухляду консолі" в Інструментах розробника та виберіть Емуляція . Встановіть екран Емуляція та встановіть для пристрою співвідношення пікселів 2,5.

Наскільки я можу зрозуміти, це не можливо, крім придбання пристрою сітківки.

Деякі обхідні шляхи

• Запропоновано тут:

  • Якщо ви збільшили розміри та пропорції зображення вдвічі однакові, ви в значній мірі в безпеці. Якщо у вас немає дисплея сітківки для тестування, перейдіть з медіа-запиту із співвідношенням пікселів на щось на основі ширини.

  • Тестування та усунення несправностей вмісту з високою роздільною здатністю
    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

• Створення веб-сайтів для дисплеїв сітківки: Подруження з пікселями
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• Як розробити веб-сайт для відображення сітківки?

• як підготувати сітківку?

Поточний спосіб емуляції дисплея сітківки (HiDPI) за допомогою Google Chrome

1) " Клацніть правою кнопкою миші " на веб-сторінці, а потім виберіть " Перевірити ", щоб відкрити Інструменти розробника Chrome

2) Клацніть піктограму " Перемкнути режим пристрою "

3) У спадному вікні пристрою у верхній частині екрана виберіть " Ноутбук з екраном HiDPI "

4) Тепер ви можете бачити, як буде виглядати веб-сайт на екрані Retina, який називається HiDPI

Я використовую бібліотеку зміни розміру зображення для динамічного створення зображень. Для версії 2x я додаю динамічний водяний знак під час налагодження - це дозволяє дуже легко зрозуміти, чи справді відображається зображення з високою роздільною здатністю чи ні. Вважаю це дуже корисним.

Спосіб роботи цього буде різним, тому не включаючи зразок коду.

Google Chrome, версія 80

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

3. Тепер у вікні перегляду над ним повинна бути панель інструментів. Клацніть піктограму параметрів (3 крапки) у верхньому правому куті та виберіть опцію Додати співвідношення пікселів пристрою .

4. Тепер ви повинні побачити опцію на панелі інструментів. Звідси ви можете переключитися на 1x, 2x або 3x.

5. Під час тестування переконайтеся, що натискаєте кнопку оновлення кожного разу, коли змінюєте співвідношення пікселів. Якщо ви встановите коефіцієнт у 2 рази, а потім встановите його нижчим, тоді ви не побачите жодних змін, оскільки браузер не отримає 1 х ресурсів, якщо він уже отримав 2 рази або вище.

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

Якщо у вас є mac (або віртуальна машина mac osx), ви можете використовувати емулятор ios з xcode. він підриває вікно вдвічі більше, тому не так, як це виглядає в реальному житті, але чітко покаже вам, розмиті ваші зображення чи ні.