Почему iOS Simulator отображает мои изображения с более низким разрешением в мобильном Safari для Retina?

Я пытаюсь протестировать свое веб-приложение в мобильном Safari с дисплеем Retina, но у меня есть доступ только к iOS Simulator. Все мои изображения отображаются с 2-кратным разрешением. Я понимаю, что это, вероятно, имеет смысл на каком-то уровне, но на самом деле я хочу, чтобы изображения отображались с их естественным разрешением.

Как я могу заставить теги img отображаться с естественным разрешением в Mobile Safari на устройстве Retina iPhone? (симулятор или иначе)

ОБНОВЛЕНИЕ

Я не пишу собственное приложение и не обращаюсь к Safari, я пишу простой веб-сайт и хочу, чтобы Safari отображал мои изображения тегов img с полным разрешением как для устройств с сетчаткой, так и без нее. (Я знаю, приму и желаю тот факт, что изображение будет меньше на устройстве Retina)


iphone mobile-safari retina-display
person Beau Simensen    schedule 28.03.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вам нужно использовать медиа-запрос. Retina не будет автоматически предполагать, что вы используете 2x активы без него; Это приведет к тому, что вся графика веб-сайта будет отображаться с размером 50% от предполагаемого размера. Стихийное бедствие!

(из шаблона HTML5):

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Вы также можете использовать соотношение: 2 для таргетинга только на iPhone Retina, но некоторые устройства, такие как Samsung Galaxy S, также имеют довольно высокое разрешение - 220ppi, я думаю, - хотя они не совсем двойные, так что будьте осторожны. Эти устройства отвечают на запрос 1.5. Отношение определяется количеством фактических пикселей, занимающих видимый пиксель. Пиксельная математика, ура! Наконец доказывает, что они не являются (и никогда не были) абсолютными единицами.

person Jess Jacobs    schedule 01.04.2011
comment
Итак, мне нужны два правила, чтобы это работало? Даже если в обоих случаях это одно и то же изображение? Как мне это сделать с помощью javascript? (скажем, я динамически добавляю фоновое изображение) - person Beau Simensen; 02.04.2011
comment
Да, вам нужно два набора активов. Большая боль, я тебя слышу. - person Jess Jacobs; 05.04.2011
comment
Для javascript вам нужно будет проверить window.devicePixelRatio. - person Jess Jacobs; 05.04.2011

arrow_upward
0
arrow_downward

Выберите оборудование в симуляторе iOS simulator-> Hardware-> Device-> iPhone (Retina) и запустите приложение.

person Chandan Shetty SP    schedule 28.03.2011
comment
Спасибо, но эта часть у меня есть. У меня проблема в том, что когда я запускаю iPhone (Retina), все мои изображения увеличиваются в два раза по сравнению с их размером. Если у меня есть изображение 50x50, я не хочу, чтобы оно отображалось с масштабированием до 100x100. Кроме того, я хочу, чтобы изображение 50x50 отображалось как 50x50 и на дисплеях без сетчатки. (Я понимаю, что на дисплее Retina он будет меньше) - person Beau Simensen; 28.03.2011

arrow_upward
0
arrow_downward

Если я правильно вас понял, вот аналогичный вопрос:

И отличный пост в блоге по этому поводу:

person Bartosz Ciechanowski    schedule 28.03.2011
comment
Я видел много подобных вещей, в которых говорится о UIWebView (это нативный код, верно?) Или обработке изображений через CSS. Однако у меня есть теги IMG (в моем случае я думаю, что теги IMG имеют смысл), и я хочу, чтобы мое одно изображение отображалось с разрешением 50x50 в обоих случаях и не масштабировалось для устройств Retina. Я понимаю, что 50x50 на дисплее Retina будет намного меньше на устройстве Retina, но в моем случае это не имеет значения. - person Beau Simensen; 28.03.2011
comment
Что ж, вы должны быть точными, вам нужно 50x50 пикселей, а не 50x50 точек, потому что на Retina 1 точка = 2 пикселя. Я не очень разбираюсь в CSS, но думаю, вы можете добавить файл .css, относящийся к сетчатке, и преобразовать свое изображение в масштаб 0,5 на случай, если вы обнаружите дисплей Retina. - person Bartosz Ciechanowski; 28.03.2011