В каких случаях в веб-программировании используются данные единицы измерения - hardware pixels, CSS px, dip?

#android #css #responsive

Привет.

Вопрос по пикселям. Запутался в них. Вот ссылка на видео на Youtube: «A Pixel is
Not a Pixel: Learn about Viewports with PPK».

Есть пиксели железа, есть CSS-пиксели (они указываются в CSS-селекторах) и есть density
independent pixels. Свойство window.aspectPixelRatio рассчитывается как раз по DIP-пикселям.
Кучу всего перечитал и по русски, и по-английски. Ничего не понял. Везде одно и тоже
(скопипастили из стандарта). 

Хочу чтобы человек четко объяснил, зачем нужны три вида пикселей, когда какой вид
пикселей используется и как переводить один вид пикселя в другой вид.

Объясните, пожалуйста, на пальцах: 


Как переводить эти три вида пикселей друг в друга.
Когда какой вид пикселей используется?
Что такое зум на обычном мониторе и на телефоне?
Во viewport (layout viewport и visual viewport) тоже хочу разобраться.

    

Ответы

Ответ 1

Хочу чтобы человек четко объяснил, зачем нужны три вида пикселей, когда какой вид
пикселей используется и как переводить один вид пикселя в другой вид.


На самом деле, речь идет о двух видах пикселей: обычные и DIP. Введение DIP было
необходимо для обеспечения соблюдения сохранности геометрических размеров на разных
устройствах отображения информации.

Простой пример

Мы нарисовали на экране с DPI=96 квадрат 24x24 пикселя. На этом экране он виден более-менее
отчетливо. Но если это воспроизвести на экране с DPI=144 и не применять масштабирование,
то рисунок "физически" останется тот же, но его видимые геометрические размеры будут
значительно меньше. Выход - масштабировать. 

Для этих целей ввели понятие DIP-пикселя, который равен 1/96 "логического" пикселя.
Что позволить производить более точное масштабирование. Ибо использование разных DPI
разных устройств при масштабировании может давать дробные числа.

Вот неплохой пример от Майкрософт:


  For example, if the user's DPI setting is 144 DPI, and you ask Direct2D to draw
a 200 × 100 rectangle, the rectangle will be 300 × 150 physical pixels. In addition,
DirectWrite measures font sizes in DIPs, rather than points. To create a 12-point font,
specify 16 DIPs (12 points = 1/6 logical inch = 96/6 DIPs). When the text is drawn
on the screen, Direct2D converts the DIPs to physical pixels. The benefit of this system
is that the units of measurement are consistent for both text and drawing, regardless
of the current DPI setting.


И табличка соответствия:

   ===============+=================
    DPI-настройка | DIP-размер
   ===============+=================
        96        |  1 пиксель
       120        |  1.25 пикселя
       144        |  1.5 пиксель
   ===============+=================


Формула масштабирования "физического" пикселя в DIP

DIPs = Физические_пиксели / (DPI/96.0)

Таким образом

Применяя DIP, на разных устройствах с разным DPI - можно обеспечить приемлемую константность
физических размеров отображаемого. 



CSS-Pixel / Device Pixel

Пример1:



Пример2:



Определение DIPs


  The number of dips is equal to the number of CSS pixels that is optimal for viewing
a website on the device at 100% zoom