[Адаптивная вёрстка] Какие пиксели использует background-size (logical / device)?

Question

[coderlex]

Под логическими я имею в виду, что при переходе к экранным к ним будет применяться масштабирование на значение pixel-ratio.

Т.е. допустим, у меня есть устройство с pixel-ratio = 2 и элемент с width = 100px, height = 100px с картинкой на бэкграунде 100x100. Если я не ошибаюсь, то картинка должна занять четверть элемента (1/2 ширины, 1/2 высоты).

Но какого размера станет отображаемая картинка на этом устройстве при background-size = 100px? Вижу 2 варианта:
1. Ничего не изменится. Т.е. background-size определяет размер в пикселях картинки (они же device pixels).
2. Картинка зальёт весь квадрат элемента. Т.е. background-size задает размер в логических пикселях (в тех, которыми задавались width и height).

Answer 1

[Александр Петров]

Если я не ошибаюсь, то картинка должна занять четверть элемента (1/2 ширины, 1/2 высоты).

Ошибаетесь. Целиком элемент и займет. Всё в браузере оперирует логическими пикселями.
Это же логично. Почему, по-вашему, часть стилей должна оперировать логическими пикселями, а часть «настоящими»?
Потому, вариант 2.

Answer 2

[Евгений Петров]

у меня есть устройство с pixel-ratio = 2

Это откуда следует? Величина devicePixelRatio давно уже переменная и зависит не только от соотношения физических пикселей и разрешения устройства, но и от соотношения страницы к viewport, и даже от банального увеличения.
Более 2-х лет назад прошла эта новость habrahabr.ru/post/159419

И не путайте пиксели CSS и физические пиксели устройства. Последние в правилах CSS вы вообще не затрагиваете (разве что краем в Media Queries).

Comments

[coderlex]

Благодарю, ссылка была полезной.

Answer 3

[Назар Мокринский]

Я думаю, правильным будет вариант 3 - сделать примитивную страничку на jsfiddle и открыть с мобильного

Comments

[coderlex]

Согласен. Но к сожалению про имеющийся девайс речь шла чисто гипотетически.

Answer 4

[Андрей]

Что мешает попробовать в инструментах разработчика? (F12, device mode)