Вывод страницы по резолюции екрана


Вывод страницы по резолюции екрана	Размещено: 14 июля 2008

   Для коректного отображения страниц 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" со следующим текстом:

   Теперь, кратко расмотрим что происходит.
   1. страница загружается и скрипт выполняется :)
   2. переменная screen.width приобретает значение резолюции дисплея в пикселях (например, 1024, 1152, 1280).
   3. далее вызываем елементы страницы через их итендификаторы и присваиваем им новое значение. Первично страница настроена на дисплей с резолюцией 1024, поэтому ширина нашей таблицы и равняеся 977 (1024-47), а средняя колонка - 577 (1024-47-400).

   Также, мы учли момент, если у пользователя отключен Javascript. В этом случае, размеры таблицы остаются в первосозданом виде и благодаря тегу <center> размещенному перед таблицей она будет отображатся в центре страницы.

Коментариев к статье (0)