Адаптация на различные видеорежимы

  Проблема, которая заботит большинство дизайнеров. К адаптации 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


© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин