Вывод страницы по резолюции экрана PDF Печать E-mail

Для корректного отображения страниц 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.

По материалам сайта: http://info-pages.com.ua/

< Предыдущая   Следующая >