Будут ли изображения выглядеть более четкими на устройствах HiDPI, если их исходная ширина превышает ширину CSS?

iPhone 6 имеет разрешение 1334x750px, но имеет CSS-ширину 375px.

Что я хочу знать, так это то, что если я сделаю изображение шириной 750 пикселей, но установлю его ширину на 375 пикселей с помощью CSS или HTML, будет ли оно выглядеть четче, чем исходное изображение размером 375 пикселей?


css device-width dpi hdpi
person mpen    schedule 10.04.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Да, будет, если браузер поддерживает HiDPI, что верно для Safari на iOS. Пиксели CSS влияют только на расчеты макета CSS; они не влияют на рендеринг изображений.

Вот короткая демонстрация, которую я собрал и протестировал в Safari на симуляторе iOS, чтобы показать вам, что я имею в виду. Вы можете видеть, что изображение 500 x 250 кажется более четким, чем изображение 250 x 125, хотя оба они имеют одинаковый размер в пикселях CSS (с синим div для сравнения).

<!DOCTYPE html>
<meta name=viewport content="width=device-width">
<style>
img { display: block; margin: 1em 0; }
div { width: 250px; height: 125px; background-color: blue; }
</style>
<div>250x125 CSS pixels</div>
<img src=http://placehold.it/500x250 height=125 width=250 alt=HiDPI>
<img src=http://placehold.it/250x125 height=125 width=250 alt=Regular>

person BoltClock    schedule 10.04.2015
comment
Когда вы говорите, что поддерживает HiDPI, вы имеете в виду любой браузер, который будет использовать сопоставление пикселей CSS с физическими пикселями больше, чем 1: 1, или вы имеете в виду что-то еще? - person mpen; 10.04.2015
comment
Хорошо. Звучит неплохо. Я так и думал; все остальное было бы безумием, но я просто хотел подтвердить :-) - person mpen; 10.04.2015
comment
Потрясающий. Этот скриншот действительно показывает разницу. Спасибо. - person mpen; 10.04.2015