Пол-пикселя?

1. Hardware pixel — физический пиксель матрицы дисплея (или, скажем, фотоаппарата). Например, в экране iPhone 5 — 640 физических пикселей по ширине.2. Device-independent pixel (dip) — пиксели дисплея, приведённые к единому масштабу, чтобы соответствовать примерно одинаковому углу зрения на всех девайсах (с учётом расстояния, на котором мы их держим).

Определение ниочём, давайте на пальцах.

Берём монитор (самый обычный, не высокой чёткости): — полоска 320 пикселей имеет длину пусть 8 см; — на монитор мы обычно смотрим с расстояния, скажем, 50 см.

Берём iPhone 5: — держим всегда ближе, пусть 30 см; — полоске 320 device-independent пикселей должен соответствовать тот же угол зрения.Значит, полоска в 320 dip имеет длину уже не 8, а 5 см. Ну понятно, простая пропорция: 8 :  50 ≈ 5 :  30. Чем больше расстояние, тем крупнее должны быть эти «независимые» пиксели, чтобы их было видно так же.

Для примера iPhone 5 считается, что ширина экрана (около 5 см) — как раз 320 dip.

Если это 40-дюймовое информационное табло на вокзале, на которое смотрят с расстояния 7 метров, то… сами посчитайте, сколько там dip’ов. :)

3. CSS pixel — единица измерения вёрстки. Если написано «width: 20 px» — это ширина 20 CSS-пикселей.

По W3C, 1 px = 1/96 дюйма или примерно 0,265 мм. Но на W3C всем пофиг (причём пофигизм начался даже до появления W3C), поэтому браузеры всегда тупо считали, что CSS-пиксель равен экранному пикселю при масштабе 100%. Но когда пришли экраны высокой чёткости, они осознали всю ж… неправильность такого подхода. И теперь верстальщику невозможно обяснить, как это — полпикселя!

В общем, гугл предлагает формулу:

Scale = CSS_pixels / dipScale — масштаб страницыCSS_pixels — число CSS-пикселей на некотором отрезке (например, ширина блока)dip — число условных device-independent pixels на этом же отрезке

Надо это пояснять дальше? 633f10b891d34e8d87fff68d3f6d3f3a.png

© Habrahabr.ru