Инструменты для имитации разных экранов DPI?

При разработке дизайна для мобильного Интернета важно проверять дизайн с физическим размером экрана целевого устройства. Простого взгляда на экран вашего ПК/Мака при одинаковом разрешении недостаточно: * Мобильные устройства имеют меньшие пиксели (более высокая плотность пикселей), и, таким образом, X x Y пикселей на экране ПК будут физически меньше на мобильных устройствах (обычно ) * Размер одного «веб-пикселя» (т. е. пикселя CSS) будет изменен мобильным устройством. например, устройства сетчатки, удваивающие пиксели.

Кто-нибудь сталкивался с хорошими инструментами для моделирования веб-дизайна (на основе изображений, а не прототипов HTML) с правильным физическим размером (на экране ПК) для мобильных устройств?

Я не уверен, что это то, что вы ищете, но существует множество «симуляторов» мобильных устройств, которые покажут вам, как ваш сайт выглядит на мобильном устройстве. iPhone4Simulator один, вот один для iPad. Тем не менее, они лучше всего подходят для тестирования адаптивного CSS-дизайна. Для имитации DPI я не уверен.
Вещи, связывающие iPhone4Simulator, почти бессмысленны, ИМХО. Я могу многое сделать с помощью окна с измененным размером :-) Дело в том, что физический размер экрана iPhone НАМНОГО меньше, чем «экран» для iPhone4Simulator (и подобного) при отображении на ПК, который может существенно влияют на проектные решения.
Абсолютно лучший способ — просмотреть дизайн на устройстве. На самом деле, это единственный метод, который я бы рекомендовал.
Проблема с симуляцией заключается в том, что есть небольшие проблемы с редукционными схемами, которые не являются идеальными по пикселям. Очень низкотехнологичным первым проходом может быть редукционное стекло, но на самом деле ничто не будет таким точным, как использование самого целевого устройства.

Ответы (3)

На самом деле нет никакого способа заставить дисплей рабочего стола иметь меньшую плотность пикселей. Это то, о чем вы спрашиваете, я думаю. В противном случае вы просто свернете свой браузер или уменьшите масштаб, в зависимости от вашего подхода. Вы могли бы стоять в два раза дальше, я думаю.

Однако , если у вас есть Mac с дисплеем Retina, вы можете увеличить его вдвое, а затем посмотреть, как выглядит графика на мониторе со стандартным разрешением. Так что это работает в одном направлении.

Я думаю, что лучшим вариантом для тестирования (помимо покупки нового Mac Pro или iPad) будет покупка дешевого iPod touch 4-го поколения и проверка изображений на нем. Это то, что я делал.

По большей части, если вы проектируете адаптивно, у вас может быть div — установка ширины или процента — и внутри, и img. Тогда в css вы бы просто width: 100%; высота: авто; изображение Я делал свои изображения примерно в 1,5-> 2 раза больше максимального размера, который я хочу, чтобы их просматривали, а затем сжимал их немного больше, чем обычно. Они отлично смотрятся на сетчатке — и они все такие же маленькие — это безумие — и теперь я просто даже не беспокоюсь о том, чтобы их проверить. Я просто следую рецепту.

Были очень хорошие статьи на эту тему. Я пытался найти их, но они были похоронены кучей действительно глупых.

когда я писал это, я по какой-то причине предполагал, что вы используете эту мета: <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1"> --- Если вы делайте, (я делаю), тогда масштабирование вашего браузера такое же, как и для устройств ... Ширина 320ox в firefox выглядит так же, как в iphone, за исключением того, что изображения более четкие, а шрифты тоже. Но структура дизайна на высоте.
ppi и пиксели - это совсем другое. Я бы переключился на % em и просто оставил пиксели позади.

Существуют виртуальные тестовые костюмы, которые, по сути, представляют собой реальные устройства, удаленно «демонстрирующие совместное использование экрана». Они работают нормально, если не использовать другие инструменты, но обременительны в использовании.

В идеале у вас просто должны быть в руках устройства, с которыми вам нужно протестировать.

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

Наконец, не всегда верно, что ваш пиксель экрана будет больше, чем ваш мобильный экран с высоким разрешением. Это зависит от ОС и устройства.

Устройства iOS, например, будут отображать ваш пиксель рабочего стола размером 1 пиксель как 4 пикселя сетчатки. Однако некоторые другие устройства, такие как BlackBerry с высоким PPI, просто отображают ваш пиксель рабочего стола в 1 пиксель как 1 пиксель устройства (это означает, что он может сжимать все вниз).

Я нашел только один инструмент для имитации PPI / DPI на экране ПК / Mac — эмулятор Android. С помощью этого инструмента вы можете установить размер эмулируемого устройства и DPI, а также контролировать физический размер, устанавливая DPI экрана, на котором просматривается эмулятор. Это, конечно, работает путем уменьшения масштаба (поэтому вы теряете пиксели), поэтому это хорошо для общего размера элементов, но не для «мелкозернистого» дизайна.

Моделирование - пустая трата времени. Если вы хотите увидеть, как это будет выглядеть, посмотрите на устройство!

Вот мой рабочий процесс: экспортируйте рассматриваемую графику в папку Dropbox, которая подключена к нескольким устройствам, где я могу ее проверить. Быстро, просто и относительно точно (это не совсем точно, пока я не увижу это в браузере).

Однако приложение для просмотра Dropbox может масштабировать изображения. Приложение для iPad никогда не занимает весь экран. Есть и другие инструменты для просмотра дизайнов на устройстве, которые намного лучше.
Вы можете вставлять изображения из Dropbox в выбранную вами программу просмотра изображений. Как и в большинстве случаев, на Android это проще, чем на iOS;)
Инструменты для имитации разных экранов DPI?
СпросиСетьПолитика конфиденциальности1y, 0v