iPhone 6 имеет разрешение 1334x750px, но имеет ширину CSS 375px.Будут ли изображения более четкими на устройствах HiDPI, если их собственная ширина превышает ширину CSS?
Что я хочу знать, если я создаю изображение 750px в ширину, но установите его ширину 375px с CSS или HTML, будет ли он выглядеть более резким, чем собственное изображение 375px?
Да, это будет, если браузер поддерживает HiDPI, что верно для Safari на iOS. CSS-пиксели влияют только на вычисления компоновки CSS; они не влияют на рендеринг изображений.
Вот быстрая демонстрация, которую я бросил вместе и протестировал в Safari на iOS Simulator, чтобы показать вам, что я имею в виду. Вы можете видеть, что изображение 500x250 кажется более резким, чем изображение 250x125, хотя оба размера одного размера в пикселях 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>
Когда вы говорите «поддерживает HiDPI» вы имеете в виду любой браузер, который будет использовать больше чем 1: 1 отображение CSS пикселей физических пикселей, или вы имеете в виду что-то другое? – mpen
@Mark: Это правильно. – BoltClock
Хорошо. Звучит хорошо. Я так думала; все остальное было бы сумасшедшим, но я просто хотел подтвердить :-) – mpen