Как адаптировать сайт под различные видеорежимы

У посетителей, приходящих на вашу страницу выставлен различный видеорежим. Я, например, пользуюсь разрешением экрана 800 на 600 точек. Мне так удобнее для моих драгоценных глаз. Большинство моих гостей используют видеорежим 1024 на 768. Все больше пользователей выставляют размер рабочего стола 1280 на 1024. Есть уникумы, у которых до сих пор стоит размер рабочего стола 640 на 480.

Возникает проблема адаптации HTML-страницы для различных видеорежимов. Именно поэтому рекомендуется при описании размеров таблиц, фреймов указывать не абсолютные в точках, а относительные размеры в процентах. Но при сложном дизайне страницы часто необходимо точно воспризвести позиционирование элементов.

JavaScript позволяет решить эту проблему. В арсенале его объектов содержится масса свойств, которые определяют свойства системы пользователя.

Чтобы определить видеорежим достаточно опросить свойства width и height объекта screen:

<script language="JavaScript">
<!-- 
var height=0;
var width=0;
width = screen.width
height = screen.height
document.write("Размер вашего рабочего стола: ");
document.write(width + " на " + height);
//-->
</script>

Если вы теперь вставите данный код в свою страницу, то следующее сообщение расскажет вам о разрешении вашего экрана:

Можете поэксперементировать, поменять на своем компьютере размеры экрана, затем нажать кнопочку "обновить" в браузере, и вы увидете, что сообщение изменилось.

Итак, опросив свойства экрана, мы получим переменные, значения которых можно использовать в дальнейшем для формирования страницы. Оба значения нам ни к чему, достаточно использовать только одну переменную - width. К тому же в различных типах браузеров значение высоты экрана будет разной величиной.

Рассмотрим самый простой вариант - на каждый видеорежим создан дубликат страниц. Необходимо сделать чтобы автоматически загружалась нужная. Воспользуемся условным оператором if, который будет проверять значение переменной width, и в зависимости от ее величины загружать необходимую страницу.

<script language="JavaScript">
<!-- 
if (width>800)
  self.parent.location="page1024.html";
    else
     if (width == 800)
     self.parent.location="page800.html";
      else
       self.parent.location="page640.html";
//-->
</script>

для браузеров не поддерживающих JavaScript предложим загружать страницу page800.html:

<noscript>
<a href="page800.html">ENTER</a>
</noscript>

Полный код страницы будет выглядеть следующим образом:

<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html; 
                             charset=windows-1251">
<TITLE>Автоматическая загрузка</TITLE>
</HEAD>

<BODY>

<script language="JavaScript">
<!-- 

var width=0;
width = screen.width


if (width>800)
  self.parent.location="page1024.html";
    else
     if (width == 800)
     self.parent.location="page800.html";
      else
       self.parent.location="page640.html";
//-->
</script>

<noscript>
<a href="page800.html">ENTER</a>
</noscript>

</BODY>
</HTML>

На этом пожалуй я закруглюсь. Ведь у вас наверняка появилось желание использовать эти новшевства в своих произведениях!
Но если у кого появились вопросы или трудности, я смогу ответить на них в любое время. Пишите по « обратной связи »

Шаг 21 - Как адаптировать сайт под различные видеорежимы