Адаптация на различные видеорежимы
Проблема, которая заботит большинство дизайнеров.
К адаптации Web-страниц на различные типы браузеров добавилась новая проблема
- адаптация на различные видеорежимы. "Резиновый" дизайн не всегда хорош там,
где нужно сохранить позиционирование, также если страница имеет заголовочный рисунок
на всю ширину Web-страницы. При высоких разрешениях страница вытягивается, строчки
становятся длинными, что сказывается на удобстве читаемости. При фиксированной
ширине, а ее обычно рассчитывают 800х600 остается почти половина монитора пуста
в 1024х768 и выше. Выходов из подобной проблемы несколько:
-
Использовать включения на стороне сервера (SSI).
Это самый лучший способ, но не все серверы, особенно бесплатные хосты, дают такую
возможность.
-
Использовать CGI-скрипты. Где-то я это слышал, но
не считаю, что это простой путь. Там кроются свои проблемы, да и не все серверы
дают такую возможность.
-
Использовать JavaScript. Думаю, это самый реальный
способ, но и этот способ предполагает различные пути. Вот об этом и будет разговор.
Чтобы определить видеорежим достаточно опросить свойства
width и height объекта screen:
<script language="JavaScript">
<!--
var height=0;
var width=0;
width = screen.width
height = screen.height
//-->
</script>
Соответственно мы получим переменные, значения которых будем использовать в дальнейшем
для формирования страницы. Следует иметь в виду, что использовать лучше только
одну переменную - width, так, как значение ее не будет зависеть от различных типов
браузеров. Так например значение height при 800х600 в MSIE будет 600, а в NN -
553. Итак, мы определили видеорежим пользователя. Теперь остается только решить:
загружать нужную страницу, проверив значение или сделать страницу "универсальной".
Начнем с самого простого: - имеем дубликаты страниц на
различные видеорежимы и производим автоматическую загрузку нужной.
<script language="JavaScript">
<!--
if (width>800)
self.parent.location="index1024.htm";
else
if (width ==800)
self.parent.location="index800.htm";
else
self.parent.location="index640.htm";
//-->
</script>
ну и позаботимся о браузерах не поддерживающих JavaScript:
<noscript>
<a href="index800.htm">ENTER</a>
</noscript>
Вот и решена проблема таким образом, но вот только где разместить этот скрипт?
В отдельном файле? - Можно. А можно и на первой загружаемой странице, а также
и на всех страницах, так, как пользователь может зайти вовсе не на первую страницу
из поисковой системы. Внимание, чтобы исключить рекурсию в этом случае загрузку
"саму себя" не нужно включать!
Проблема в таком подходе одна: приходится дублировать
каждую страницу сайта.
Второй способ несколько сложнее, но он не предполагает
дублирование страниц. Например, мы формируем переменные типа:
<script language="JavaScript">
<!--
table800='<table border="0" width=776 cellspacing=0 cellpadding=0>';
table1024='<table border="0" width=1000 cellspacing=0 cellpadding=0>';
img800='<img src="img800.gif" width=775 height=110 border=0 alt="">';
img1024='<img src="img1024.gif" width=999 height=110 border=0 alt="">';
// и так далее...
//-->
</script>
Далее остается только в нужном месте выполнить:
<script language="JavaScript">
<!--
if (width>800) {
document.writeln(table1024);
......
document.writeln(img1024);
......
}
else {
document.writeln(table800);
......
document.writeln(img800);
......
}
//-->
</script>
Приблизительно так можно вставить ключевые
параметры в страницу для адаптации к различным видеорежимам. Способ немного громоздкий,
но он позволяет применять более двух вариантов дизайна. Имеется более простой
способ, но только на 2 варианта:
<script language = "JavaScript">
if (width < 801) {
var a='!';
document.write('<'+a+'--');
}
</script>
Пишем любой текст и любые теги для режима более 800х600
<!-- -->
<script language = "JavaScript">
if (width >800) {
var a='!';
document.write('<'+a+'--');
}
</script>
Пишем любой текст и любые теги для режима 800х600 и менее
<!-- -->
Этот метод хорош тем, что не нужно выводить HTML через
document.writeln(), а писать обычно. Внимание, в тексте HTML до <!-- -->
нельзя писать комментарии! Программа формирует первый тег комментария по условию,
а закрывается тегом в самом тексте HTML, тем самым исключая ненужное. Это самый
простой, пожалуй метод и не требует больших JavaScript наворотов. Единственный
недостаток в том, что если зайти браузером не поддерживаемом JavaScript - такая
будет "куча-мала".
Вот пожалуй и все. Если знаете другие методы реализации этой проблемы на стороне
клиента, пишите.
Информация взята с сайта Wdstudio
|