Здравствуйте.
Как узнать физические размеры экрана? Привязать мои css под разные габариты экранов?

Столкнулся со следующей проблемой: сверстал html-страницу, все параметры указывал в "pt" (как я понял 1 pt = 1/72 дюйма). Сверстал так, чтобы сайт красиво смотрелся на моем ноутбуке. Но когда посмотрел на вертикально расположенном планшете, то сайт предстал очень мелким.

Рассмотрим пример. 
Допустим, я хочу вывести на экран 6 квадратных блоков, у которых итоговая видимая ширина и высота равны 2 дюймам ( = 2 * 72pt = 144pt = 10pt + 124pt + 10pt). Для всех блоков применен стиль "float:left".


Возьмем мой ноутбук. Диагональ экрана 15 дюймов, соотношение сторон 9:16. Соответственно, высота экрана 7,35 дюйма, а ширина экрана 13,08 дюйма.
В таких условия отображается строка из 6 квадратов.

Возьмем планшет. Диагональ экрана 7 дюймов, соотношение сторон так же 9:16. Соответственно когда планшет повернут вертикально, ширина экрана 3,43 дюйма, а высота экрана 6,10 дюйма. 
Теоретически на одну строчку экрана должен влезть только 1 квадрат. 
На практике, все квадраты умещаются на одной строчке, при этом они становятся очень маленькими.

Что делать?

Предлагаю порыться тут.

Предлагаю использовать медиа-запросы.
Это когда в зависимости от разрешения экрана меняются стили.
Тоесть для каждого диапазона разрешений браузера у Вас будет свой набор стилей CSS.