Плотность пикселей, отображение сетчатки и размер шрифта в CSS

У меня нет самого Retina MacBook, чтобы проверить эти вещи, и, похоже, в Интернете много путаницы в отношении веб-дизайна на дисплеях с высокой плотностью пикселей.

Теперь я предполагаю, что WebKit на MacBook с дисплеем Retina масштабирует страницу примерно в два раза больше, поскольку большинство веб-страниц не созданы для адаптации к более высокой плотности пикселей?

На мой взгляд, идеальный случай при проектировании для них или фактически любого типа дисплея - использовать ems вместо пикселей, как вы могли бы просто сделать;

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    body { font-size: 150%; }
}

@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
    body { font-size: 200%; }
}

и вся страница будет масштабироваться соответствующим образом. Или это? Является ли размер шрифта по умолчанию для браузеров, работающих на Retina MacBooks, еще 16 пикселей или выше? Поскольку, если он выше, эффект масштабирования будет размножаться.

Я думаю, мой вопрос: если я использую ems последовательно, единственное, что мне нужно сделать, это изменить размер шрифта для каждого соотношения пикселов устройства?

Ответ 1

ОК, это довольно серьезное недоразумение (это круто!:)), поэтому здесь приводится краткое объяснение того, что вы можете сделать.

Во-первых, у любых последних iPhone/iPod/iPad или многих телефонов Android есть экраны Hi DPI, поэтому у вас может быть что-то, с чем можно протестировать. Если нет, и вы делаете это профессионально, просто купите iPod Touch 4G.

С точки зрения того, как это работает, для 99% вещей вам ничего не нужно. Если бы он работал так, как вы предлагали, то большинство веб-сайтов были бы четвертью размера, который должен быть, и интернет будет нарушен.

Для шрифтов, SVG, теней полей CSS, градиентов и любого другого CSS-рисунка, все хорошо. Эти вещи выглядят потрясающе без дополнительной работы. (Следовательно, почему мы некоторое время подталкивали ко всему в CSS.)

Для растровых изображений (т.е. pngs, jpgs, gif) все, что вам нужно сделать, это предоставить изображение с разрешением 2x, но размер будет таким же, как и в обычном режиме.

В качестве примера, если ваша страница имела изображение 100px на 100px, вы бы предоставили изображение размером 200px на 200px, но укажите в CSS или как атрибут в HTML, который равен 100px на 100px.

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

Я предполагаю, что в ретроспективе было бы лучше назвать блок px в CSS чем-то другим, например dot или что-то еще, но там вы идете.

Иногда вы видите ссылки на независимые от устройства пиксели, что является разницей между CSS px и реальным пикселем на экране.

Ответ 2

Дисплей Retina не удваивает размер элемента. Он воспроизводит только изображения в Интернете.

Для каждого "веб-пикселя" в изображении требуется 4 (я думаю) "пикселя экрана", поэтому изображения растягиваются, чтобы заполнить эти дополнительные пиксельные пространства, делая их менее четкими на экране сетчатки. Изображения должны экспортироваться с более высоким DPI и отображаться на дисплее Retina через мультимедийные запросы или Javascript.

Текст, эффекты CSS, Canvas, SVG Vectors и т.д. непосредственно не отображаются на экране сетчатки.