Вывод страницы по резолюции экрана
Для корректного отображения страниц html, необходимо подстраивать код страницы под различные расширения экранов дисплея пользователей. Для этого идеально подходит использование Javascript. Однако, не стоит забывать и про то, что некоторые пользователи отключают Javascript в браузерах, с целью ограничить себя от лишний выскакиваемых окон с рекламой.Итак, стоит задача: корректно отобразить web-страницу под различными расширениями дисплеев.
Но, также, необходимо учесть следующие моменты:
- пользователь отключил Javascript;
- не использовать процентное деление ширины ячеек таблиц (так как, имеет место автоматическое увеличение браузером ширины ячеек при помещение в них различных компонентов, например, <textarea>).
Нам необходимо выполнить следующие действия:
1. создать обычную web-страничку;
2. присвоить таблицам и ячейкам, которые должны динамически изменятся, итендификаторы;
3. с помощью Javascript определить резолюцию дисплея и изменить значение ширины таблиц/ячеек на нужную.
Давайте рассмотрим краткий пример, создайте простую web-страничку:
<html> <head> <title>Пример отображения ширины таблицы на дисплеях с разными резолюциями</title> </head> <body> <script src="width_table.js" type="text/javascript"></script> <center> <table id="table1" width="977" cellpadding="0" cellspacing="0" border=1> <tr> <td width=200>Ширина ячейки 200 пикселей и не меняется</td> <td id="td1" width="577">Ширина ячейки динамически меняется</td> <td width=200>Ширина ячейки 200 пикселей и не меняется</td> </tr> </table> </body> </html>Как Вы заметили, мы подключаем к странице файл "width_table.js" с кодом Javascript.
Создаем файл "width_table.js" со следующим текстом:
function width_table()
{
var main_width=screen.width-47;/* 47 пикселей мы отнимаем для того чтобы табличка была чуть меньше ширины браузера и внизу не появлялась горизонтальная прокрутка*/
if (document.getElementById("table1")) {document.getElementById("table1").width=main_width-47;}
if (document.getElementById("td1")) {document.getElementById("td1").width=main_width-47-400;}/* 400 пикселей это сума ширины боковых колонок таблицы ширина которых должна быть фиксированной*/
}
setTimeout("width_table()",100);/* запускаем выполнение скрипта через 100 мс*/
Теперь, кратко рассмотрим что происходит. 1. страница загружается и скрипт выполняется
2. переменная screen.width приобретает значение резолюции дисплея в пикселях (например, 1024, 1152, 1280).
3. далее вызываем элементы страницы через их итендификаторы и присваиваем им новое значение. Первично страница настроена на дисплей с резолюцией 1024, поэтому ширина нашей таблицы и равняется 977 (1024-47), а средняя колонка - 577 (1024-47-400).
Также, мы учли момент, если у пользователя отключен Javascript. В этом случае, размеры таблицы остаются в первосозданом виде и благодаря тегу <center> размещенному перед таблицей она будет отображаться в центре страницы.
Данная статья носит более теоретический характер, чем практический. На практике большинство веб мастеров для растяжения страницы сайта на всю ширину дисплея используют свойства процентного растяжения таблиц. Но из-за того, что браузер строит таблицы сразу же по мере их загрузки, не всегда корректно отображаются столбцы/рядки с не зафиксированным размером. Обычно это решается с помощью вложенных таблиц, но также это можно решить и с помощью javascript.
URL: https://visavi.net/articles/46