2

Какие вы используете методы при вёрстке под большие экраны. Если с планшетами и смартфонами всё понятно (@media), то как быть с очень большими экранами. Например, fullHD телевизор. В связи с тем, что там крупное "зерно", текст становится трудно читаемым. При этом на мониторе с тем же разрешением, всё выглядит отлично.

Другими словами я хочу, чтобы на FHD телевизоре страница выглядела как на FHD планшете а не FHD мониторе.

2 ответа 2

5

В CSS нет возможности использовать реальные единицы измерения (см, дюймы), только относительные (css-пиксели тоже относительны). Устройства и браузеры ответственны за определение css-вьюпорта таким, чтобы сайт смотрелся на них читабельно. Подробнее об этом - в моем ответе к вопросу "В каких случаях (и где) используются данные единицы измерения CSS - px, CSS px, dip?".

С телевизорами проблема - они неадекватно определяют размер вьюпорта. Например, FullHD телевизор определяет вьюпорт как 1920*1080, хотя, с учетом размера экрана и средней дальностью экрана от зрителя - должен определять вьюпорт в районе 960*540, с плотностью пикселей равным двум.

Оптимальный размер вьюпорта можно рассчитывать здесь. А здесь можно изучить, какие размеры вьюпорта устройства ставят по стандарту.

Обычно мы доверяем определение размера вьюпорту устройству, вот таким кодом в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />

Но на проблемных устройствах нужно корректировать размер вьюпорта самим. Это можно делать в js, таким образом:

document.querySelector('meta[name=viewport]')
        .setAttribute('content', 'width='+width+
                                ',minimum-scale='+min_scale+
                                ',maximum-scale='+max_scale+
                                ',initial-scale='+init_scale);

Остается только научить сайт определять, на каком устройстве он запущен.

Для этого есть user-agent браузера, и ширина/высота вьюпорта, определяемая устройством. Сопоставляя их, можно пытаться "угадать", какое устройство перед нами, и корректировать размер вьюпорта.

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

2

Используйте <link rel="stylesheet" media="tv" href="example.css"> Для определения размера используйте em или % вместо px. Инфо W3. Остальные стили css3 применяйте как обычно.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.