170

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

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

css

— ільо
джерело

161

Коротка відповідь

Коефіцієнт пікселів пристрою - це відношення між фізичними пікселями та логічними пікселями. Наприклад, iPhone 4 та iPhone 4S повідомляють про коефіцієнт пікселів пристрою 2, оскільки фізична лінійна роздільна здатність подвоюється лінійній лінійній роздільній здатності.

Фізична роздільна здатність: 960 x 640
Логічна роздільна здатність: 480 x 320

Формула така:

$linres_p / linres_l$

Де:

$linres_p$ - фізична лінійна роздільна здатність

і:

$linres_l$ є логічним лінійним дозволом

Інші пристрої повідомляють про різні коефіцієнти пікселів пристрою, включаючи не цілі числа. Наприклад, Nokia Lumia 1020 повідомляє 1,6667, Samsumg Galaxy S4 - 3, а Apple iPhone 6 Plus - 2,46 (джерело: dpilove ) . Але це в принципі нічого не змінює, як ви ніколи не повинні проектувати жоден конкретний пристрій.

Обговорення

CSS «піксель» навіть не визначений як «один елемент зображення на екрані якого - то», а скоріше в якості нелінійного кутового вимірювання від $0,0213 °$ кута огляду, який становить приблизно $1/96$ дюйм на відстані витягнутої руки. Джерело: Абсолютні довжини CSS

Це має чимало наслідків щодо веб-дизайну, наприклад, підготовка ресурсів зображення високої чіткості та ретельне застосування різних зображень при різних співвідношеннях пікселів пристрою. Ви не хочете змушувати пристрій низького класу завантажувати зображення дуже високої роздільної здатності, а лише зменшити масштаб локально. Ви також не хочете, щоб пристрої високого класу збільшували масштаби зображень із низькою роздільною здатністю для розмитої роботи користувачів.

Якщо ви застрягли з растровими зображеннями, щоб пристосувати для багатьох різних коефіцієнтів пікселів пристрою, вам слід використовувати CSS Media Queries для надання різних наборів ресурсів для різних груп пристроїв. Поєднайте це за допомогою приємних хитрощів, таких як background-size: coverабо явно встановіть background-sizeзначення відсотків.

Приклад

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

Таким чином, кожен тип пристрою завантажує лише правильний ресурс зображення. Також пам’ятайте, що pxпристрій у CSS завжди працює на логічних пікселях .

Корпус для векторної графіки

Оскільки все більше і більше типів пристроїв з'являється, стає складніше надавати всім адекватні ресурси растрового зображення. У CSS медіа-запити наразі є єдиним способом, а в HTML5 елемент зображення дозволяє використовувати різні джерела для різних медіа-запитів, але підтримка все ще не на 100%, оскільки більшість веб-розробників все ще повинні підтримувати IE11 ще деякий час ( джерело: канюза ) .

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

— Андерс Торнблад
джерело

1

ніж, тому якщо я зроблю файл css для iphone 4 і даю на сторінці розміри CSS 480 x 320, і width=device-widthя буду його розтягувати на весь екран?

— ilyo

1

Саме так. І якщо ви використовуєте зображення високої роздільної здатності background-image, ви можете їх комбінувати -webkit-background-size:50%, оскільки в іншому випадку розмір зображення буде відповідати логічній кількості пікселів. w3.org/TR/2002/WD-css3-background-20020802/#background-size

— Андерс Торнблад

2

Ви не можете. Вам потрібно буде розташувати елементи за допомогою логічних пікселів, а також використовувати зображення з більшою роздільною здатністю та background-sizeхитрість оптимального використання дисплея.

— Андерс Торнблад

2

Я не маю уявлення про андроїдний випадок. Можливо, різні виробники мають різні уявлення про логічні та фізичні пікселі ... Спробуйте самі на декількох сотнях різних пристроїв ... Або просто припустіть, що вказані пристроєм значення є правильними. Не створюйте дизайн для конкретних пристроїв, а розробляйте діапазони значень, використовуючи медіа-запити!

— Андерс Торнблад

2

@atornblad Я думаю, що має бути ".. між фізичними та логічними пікселями"

— Ілля Бузюк

159

Коефіцієнт пікселів пристрою == Коефіцієнт пікселів CSS

У світі веб-розробок коефіцієнт пікселів пристрою (його також називають CSS Pixel Ratio) визначає, як інтерпретується роздільна здатність екрана пристрою CSS.

CSS браузера обчислює логічну (або інтерпретовану) роздільну здатність пристрою за формулою:

$\text{logical resolution}=\frac{\text{physical resolution}}{\text{device pixel ratio}}$

Наприклад:

Apple iPhone 6s

Фактична роздільна здатність: 750 x 1334
Співвідношення пікселів CSS: 2
Логічне дозвіл:

$\frac{750}{2} \text{ x } \frac{1334}{2} = 375 \text{ x } 667$

Під час перегляду веб-сторінки CSS подумає, що пристрій має екран з роздільною здатністю 375x667, і медіа-запити відповідатимуть так, ніби екран 375x667 . Але відображені елементи на екрані будуть вдвічі різкішими, ніж фактичний екран 375x667, оскільки на фізичному екрані є вдвічі більше фізичних пікселів.

Деякі інші приклади:

Samsung Galaxy S4

Фактична роздільна здатність: 1080 x 1920
Співвідношення пікселів CSS: 3
Логічне дозвіл:

$\frac{1080}{3} \text{ x } \frac{1920}{3} = 360 \text{ x } 640$

iPhone 5s

Фактична роздільна здатність: 640 x 1136
Співвідношення пікселів CSS: 2
Логічне дозвіл:

$\frac{640}{2} \text{ x } \frac{1136}{2} = 320 \text{ x } 568$

Чому існує коефіцієнт пікселів пристрою?

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

Типовий повноекранний настільний монітор - приблизно 24 "при роздільній здатності 1920x1080. Уявіть, якби цей монітор зменшився до приблизно 5", але мав таке ж дозвіл. Перегляд речей на екрані було б неможливим, оскільки їх було б так мало. Але виробники виходять із екранами телефону з роздільною здатністю 1920x1080 тепер.

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

Ось інструмент, який також повідомляє вам щільність пікселів вашого поточного пристрою:

http://bjango.com/articles/min-device-pixel-ratio/

— Джейк Вілсон
джерело

Стаття з Вікіпедії видалена. :-( Чи є ця інформація ще десь?

— Simon East

1

Тож зображення розтягуються так, щоб вони відповідали високим dpi або фізичним пікселям. Скажімо, зображення - 300px, логічне / css px - теж 300, але фізичне px - 600, то встановлення ширини зображення означало б розтягнення зображення.

— Мухаммед Умер

2

@MuhammadUmer У вашому прикладі зображення зображення в 300 пікселів width: 100%з повною шириною дисплея. Він не розтягнеться. Екран "думає", що це 300-піксельний дисплей. Зображення відображаються відповідно до логічної / css роздільної здатності. Тепер у вашому прикладі ви також можете подавати зображення у форматі 600 пікселів. Це буде повна ширина логічного відображення в 300 пікселів, але оскільки ваш власний дисплей становить 600 пікселів, зображення буде виглядати вдвічі різкішим, ніж ваше оригінальне зображення в 300 пікселів. Більше зображення, але воно виглядає краще, оскільки дисплей має всі ці додаткові пікселі. Це ідея "Retina Displays".

— Джейк Вілсон

@JakeWilson: Це нова тема для мене, і я її не повністю розумію. У прикладі співвідношення пікселів CSS = 2. Зображення шириною 300 фізичних пікселів, у css ми встановимо його на 100%, тож воно стане 300 пікселів CSS. Оскільки співвідношення px CSS становить 2, воно стане 600 фізичних пікселів, а його ширина точно відповідатиме ширині дисплея. Але чому це не розтягується, якщо його початкова ширина становить 300 фізичних пікселів, а тепер це 600 фізичних пікселів? Я розумію, що її якість нижча, оскільки фізично вона розтягнулася від 300 до 600 пікселів. Чи можете ви детальніше зупинитися на цьому, будь ласка?

— Пітер

1

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

— Джейк Вілсон

9

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio
Дає кількість пікселів пристрою на CSS-піксель.

це майже самопояснення. число описує відношення того, скільки "реальних" пікселів (фізичних пікселів екрану) використовується для відображення одного "віртуального" пікселя (розмір, встановлений у CSS).

— оезі
джерело

4

як я можу знати, чи пристрій взагалі використовує вимірювання віртуальних пікселів і що це таке? і як я можу використовувати пікселі пристрою у вимірюваннях css, а не у віртуальному?

— ilyo

на жаль, вам доведеться google або тестувати його на реальному пристрої :(

— netalex

9

Стаття Бориса Смуса із зображеннями високої DPI для змінної щільності пікселів має більш точне визначення коефіцієнта пікселів на пристрої: кількість пікселів пристрою на один піксель CSS - це гарне наближення, але не вся історія.

Зауважте, що ви можете отримати DPR, який використовується пристроєм, з яким window.devicePixelRatio.

— Сем Даттон
джерело

яке саме співвідношення пікселів пристрою?

Коротка відповідь

Обговорення

Приклад

Корпус для векторної графіки

Коефіцієнт пікселів пристрою == Коефіцієнт пікселів CSS

Чому існує коефіцієнт пікселів пристрою?