Рублевый Форекс, предлагает круглосуточную торговлю.
Кнопка сайта:
По всем вопросам пишите на webmaster@info-pages.com.ua. Вы можете свободно использовать/размещать/перепечатывать статьи сайта всего лишь указав ссылку на источник.
Правильно отобразить страницу в зависимоти от резолюции экрана
Вывод страницы по резолюции экрана
Размещено: 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" со следующим текстом:
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.
![:]](picture/smiles/6.gif)
