Изменения в зависимости от разрешения экрана

Автор: Илья Алямкин Сайт: http://mtk.on.ufanet.ru/
   
   
   Похоже, эта тема становится любимой. :)) Хотя тема действительно актуальная, очень часто web дизайнеру приходиться придумывать "универсальные" странички под все возможные разрешения экранов. Как решать эту проблему— личное дело каждого. Можно использовать таблицы, можно все просто сделать одного фиксированного размера, можно использовать скрипты. У использования JavaScript есть только два серьезных минуса, на мой взгляд, первый— отключенная поддержка в броузере посетителя, второй— недостаток знаний и опыта у web дизайнера. Очень часто встречается и то, и это. :))) Гениев нет, так сказать...
   
   Изменение фонового рисунка в зависимости от разрешения экрана.
   Тема, конечно, интересная. Но фоновый рисунок под максимальное разрешение может оказаться уж очень огромного размера, стоит поискать другой выход, если возможно. Но в некоторых случаях у web дизайнера просто не остается другого выхода. Привожу два варианта скрипта, сам не пробовал, но, на первый взгляд, должно все работать.
   
   <script language="JavaScript">
   <!--
   if (self.screen) {
   width = screen.width
   height = screen.height
   }
   else if (self.java) {
   var jkit = java.awt.Toolkit.getDefaultToolkit();
   var scrsize = jkit.getScreenSize();
   width = scrsize.width;
   height = scrsize.height;
   }else{
   width = height = 'x'
   }
   if (width == 640) {
    document.write('<BODY
   BACKGROUND=fon1.jpg>'); }
   else if (width == 800) {
    document.write('<BODY
   BACKGROUND=fon2.jpg>'); }
   else if (width == 1024) {
    document.write('<BODY
   BACKGROUND=fon3.jpg>'); }
   else if (width == 1280) {
    document.write('<BODY
   BACKGROUND=fon4.jpg>'); }
   else {
    document.write('<BODY
   BACKGROUND=fon5.jpg>'); }
   //-->
   </script>
   
   Вариант второй
   
   <SCRIPT LANGUAGE="JavaScript">
   <!-- Script Begin
    if (screen.width==800)
    { document.write("<BODY
   BACKGROUND='images/800.jpg'>");
    }
    else if (screen.width==1024)
    { document.write("<BODY
   BACKGROUND='images/1024.jpg'>");
    }
    else
    { document.write("<BODY
   BACKGROUND='images/other.jpg'>");
    }
   // Script End -->
   </SCRIPT>
   
   Изменение параметров фреймовой структуры в зависимости от разрешения экрана.
   Фреймовые структуры не всегда "выживают" при изменении размеров экрана, данный скрипт изменяет размеры фреймов и вполне может пригодиться... По идее, ничего особо и не изменилось по сравнению с предыдущими JavaScript-ами.
   
   <script language="JavaScript">
   <!--
   if (self.screen) {
   width = screen.width
   height = screen.height
   }
   else if (self.java) {
   var jkit = java.awt.Toolkit.getDefaultToolkit();
   var scrsize = jkit.getScreenSize();
   width = scrsize.width;
   height = scrsize.height;
   }else{
   width = height = 'x'
   }
   if (width == 640) {
   document.write('<FRAMESET cols=20%,80%>
   <FRAME src="menu.htm">
   <FRAME name=display src="firstpage.htm">
   </FRAMESET> '); }
   else if (width == 800) {
   document.write('<FRAMESET cols=50%,50%>
   <FRAME src="menu.htm">
   <FRAME name=display src="firstpage.htm">
   </FRAMESET>'); }
   else if (width == 1024) {
   document.write('<FRAMESET cols=10%,90%>
   <FRAME src="menu.htm">
   <FRAME name=display src="firstpage.htm">
   </FRAMESET> '); }
   else if (width == 1280) {
   document.write('<FRAMESET cols=30%,70%>
   <FRAME src="menu.htm">
   <FRAME name=display src="firstpage.htm">
   </FRAMESET> '); }
   else { document.write('<FRAMESET cols=40%,60%>
   <FRAME src="menu.htm">
   <FRAME name=display src="firstpage.htm">
   </FRAMESET> '); }
   //-->
   </script>
   
   Всем этим можно воспользоваться, но лучше попробовать обойтись простыми таблицами и компоновкой графики. Не всегда имеет смысл "наворачивать" все возможные эффекты и удобства... Самая универсальная страничка— просто таблицы, графические файлы в GIF или JPG, без скриптов, эффектов и прочего. Возможно, возникнет некоторое неудобство при просмотре на совсем маленьком или, наоборот, большом экране, но все броузеры поддерживающие графику отобразят все в приемлемом виде и без потери информации. А web дизайнеру и тут работы много будет, одна графика чего стоит...
   
   
   
   
Опубликовано: HTTP://WWW.R-T-F-M.INFO, pauk ©® 2000-2011.
All rights reserved.
При перепечатки ссылка на сайт обязательна.
Мнение администрации сайта не всегда совпадает с мнением автора..