0 Пользователей и 1 Гость просматривают эту тему.
  • 11 Ответов
  • 11849 Просмотров
*

Sulpher

  • Живу я здесь
  • 2054
  • 393 / 15
  • Шаблоны и расширения Joomla
Занимаясь разработкой сайта, я столкнулся с вопросом выбора оптимального разрешения экрана, поскольку у многих сейчас мониторы 1280x1024 пикселей, в то же время, весьма большой процент людей продолжает использовать стандартное - 1024x768. Заказчики с новыми мониторами стали жаловаться на "пустые места по бокам". Естественно, не всегда структура макета позволяет использовать резиновый дизайн ввиду определенных индивидуальных особенностей. Как вариант, я делаю два шаблона - под 1024x768 и 1280x1024. Но мне кажется, использовать Template Chooser неудобно.

Как кто обычно решает данную проблему? Делаете резиновый дизайн или фиксируете?

Можно ли повесить в начале Java script, определяющий разрешение и загружающий нужный шаблон Джумлы? Как это можно сделать? Я просто такое еще не делал под данную СMS.

*

Alex_B

  • Захожу иногда
  • 196
  • 39 / 0
Совсем новый шаблон с помощью JS подгрузить нельзя, можно определить разрешение экрана и подгрузить соответствующий CSS.
*

Sulpher

  • Живу я здесь
  • 2054
  • 393 / 15
  • Шаблоны и расширения Joomla
Благодарю. Тогда шаблон нужен, соответственно, div'ный. Жизнь подталкивает на это.  :)
*

Sulpher

  • Живу я здесь
  • 2054
  • 393 / 15
  • Шаблоны и расширения Joomla
А можно ли определить разрешение экрана с помощью встроенных возможностей Joomla по типу определения версии браузера? Не могли бы Вы привести код? К сожалению,  я не владею базовыми знаниями Java Script/PHP, поэтому не могу произвести модификацию скрипта под нужды Джумлы, но было бы здорово получить решение в духе кода, определяющего версию браузера.
Я нашел вот такой код: (http://andy.uvarov.ru/index.php?level=6&part=7)

Цитировать
<script>
document.write ("Разрешение вашего экрана : ")
document.write (screen.width + " x " + screen.height + ".")
if( screen.width >= 1024 && screen.height >= 768 ) document.write(" Приятной работы !!!")
else
document.write(" Рекомендуемое разрешение 1024 х 768 !!!");
</script>


Идеальный вариант: повесить определение если 1024x768 и больше - загрузка css1, если 1280x1024 и больше - загрузка css2. Default: 1024x768. 

800x600, думаю, смысла поддерживать нет.
*

one_more

  • Захожу иногда
  • 139
  • 87 / 3
  • there is no spoon
Код
<head>
...
<script>
if(screen.width >= 1024)
document.write("<link href=\"css1.css\" rel=\"stylesheet\" type=\"text/css\" />")
else
document.write("<link href=\"css2.css\" rel=\"stylesheet\" type=\"text/css\" />");
</script>
</head>

1. Я не совсем понял поставленную задачу. Значения ширины 1280px и более входит в 1024px и более. (т.е. значения пересекаются). В данном примере  если >= 1024px -- загружается css1.
Если <1024 -- загружается css2 (значение по умолчанию). Нужно будет указать правильные пути href=\"css1.css\" и href=\"css2.css\"

2. Очень важное замечание: если JavaScript отключен, не загрузиться ни css1, ни css2. По этой причине вариант выглядит не блестяще

3. Этот подход кажется не оптимальным ещё по одной причине:  окно браузера не обязательно бывает раскрыто на всю ширину экрана. ИМХО, лучше похимичить посложнее, но понадёжней.


Цитировать
определить разрешение экрана по типу определения версии браузера
Если именно по этому принципу, то невозможно. Поскольку браузер не отсылает такую информацию в Request Header. А информацию о своём названии отсылает (да и то, только если не врёт, хотя имеет на это полное право :)
« Последнее редактирование: 24.10.2007, 12:40:26 от one_more »
Errare humanum est
*

Alex_B

  • Захожу иногда
  • 196
  • 39 / 0
Вот так можно узнать высоту и ширину рабочей части окна (без тулбаров)

var clientHeight = document.compatMode=="CSS1Compat" && !window.opera?document.documentElement.clientHeight:document.body.clientHeight

var clientWidth = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth
*

Sulpher

  • Живу я здесь
  • 2054
  • 393 / 15
  • Шаблоны и расширения Joomla
Спасибо за код, one_more!! Этот рецепт действительно помог. Уже вставил себе в проект.


Цитировать
1. Я не совсем понял поставленную задачу. Значения ширины 1280px и более входит в 1024px и более. (т.е. значения пересекаются). В данном примере  если >= 1024px -- загружается css1.
Если <1024 -- загружается css2 (значение по умолчанию). Нужно будет указать правильные пути href=\"css1.css\" и href=\"css2.css\"
Наверное я не совсем правильно выразился. ) Ну, думаю, правильное решение такое:
если >=1280x1024 -- загружается css2,
в противном случае по грузится css1. (1024x768)

То есть, выходит, что если у человека разрешение выше стандартного, он получит шаблон под широкий монитор. 800x600, думаю, поддерживать смысла нет. Слишком дорого  - придется жертвовать просторами графики ради совсем небольшого процента пользователей.

Цитировать
2. Очень важное замечание: если JavaScript отключен, не загрузиться ни css1, ни css2. По этой причине вариант выглядит не блестяще
А что говорит статистика? Много ли существует пользователей с отключенным JS?

Цитировать
3. Этот подход кажется не оптимальным ещё по одной причине:  окно браузера не обязательно бывает раскрыто на всю ширину экрана. ИМХО, лучше похимичить посложнее, но понадёжней.
Что можно предложить взамен? Способ, который привел  Alex_B? (к великому сожалению, человеку без знания базиса JS сложно привести код в окончательный вид, придется просить Вас привести полный код  ^-^)

*

Sulpher

  • Живу я здесь
  • 2054
  • 393 / 15
  • Шаблоны и расширения Joomla
Вот доработанный скрипт, который проходит XHTML валидацию: (оригинал взят у one_more)
Код
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
if(screen.width >= 1280)  {
     document.write('<link href="/templates/mservice_optimal/css/template_css_wide.css" rel="stylesheet" type="text/css" />');
}
else {
     document.write('<link href="/templates/mservice_optimal/css/template_css.css" rel="stylesheet" type="text/css" />');
}
/*]]>*/
</script>

Но есть один существенный ньюанс: валидатор не находит CSS стили в документе. Это из-за использования java script'а или виной тому модификация, которую я привел? Как это можно исправить?

Цитировать
3. Этот подход кажется не оптимальным ещё по одной причине:  окно браузера не обязательно бывает раскрыто на всю ширину экрана. ИМХО, лучше похимичить посложнее, но понадёжней.

Есть какие-нибудь идеи или предложения? :)
*

xxxTiTxxx

  • Осваиваюсь на форуме
  • 35
  • 6 / 0
Цитировать
2. Очень важное замечание: если JavaScript отключен, не загрузиться ни css1, ни css2. По этой причине вариант выглядит не блестяще
А что если под тегом <script>...</script>
вставить
Код
<noscript>
<link href=\"css1.css\" rel=\"stylesheet\" type=\"text/css\" />
</noscript>
Тогда у кого не включен/отсутствует JavaScript загрузиться css1.css (тут уж все равно не вытащить разрешение так что какой-нибудь взять за базовый). А у кого включен - содержимое тега проигнорируется
*

one_more

  • Захожу иногда
  • 139
  • 87 / 3
  • there is no spoon
Есть какие-нибудь идеи или предложения? :)
Идеи есть, времени нет. По идее, должна решиться и вторая "ситуация":

валидатор не находит CSS стили в документе.
Errare humanum est
*

Sulpher

  • Живу я здесь
  • 2054
  • 393 / 15
  • Шаблоны и расширения Joomla
Ну будем надеяться, что у Вас как-нибудь найдется немного времени на данную дискуссию.  ;)

Идея предложенная xxxTiTxxx мне понравилась. Респект!
*

Sulpher

  • Живу я здесь
  • 2054
  • 393 / 15
  • Шаблоны и расширения Joomla
На форуме Mascon дали еще один рецепт.
Привожу цитату:
Цитировать
Thomas:
Пропишите css по умолчанию который будет применим к большинству мониторов, а для специальных разрешений пусть срабатывает javascript. Тоесть если у человека если даже отключены скрипты то он увидит страничку со стилями. Тем более в css который будет добавляться при помощи js думаю надо будет просто переопределить некоторый вещи а не писать все заново. Если у человека сработает js то стили будут выгялдеть таки образом

<!-- Это основной стиль он старует раньше -->
<link href="/templates/mservice_optimal/css/template_css.css" rel="stylesheet" type="text/css" />

<!-- Этот может сработать при широком экране -->
<script>
if(screen.width >= 1280) {
document.write('<link href="/templates/mservice_optimal/css/template_css_wide.css" rel="stylesheet" type="text/css" />');
}
</script>

И еще одна заметка из практики

Насколько я понимаю вы используете CDATA чтобы вывести при помощи XSLT ?
Если да, то можно писать проще достаточно написать слово script in UPPER CASE
<SCRIPT language="JavaScript" type="text/javascript">
bla bla bla
</SCRIPT>

Прошу простить за пересказывание чужих советов, хотелось бы всем вместе найти оптимальное решение проблемы и выслушать ваши соображения по поводу изложенного варианта.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать автоматическую смену дизайна при смене разрешения?

Автор felixxx79

Ответов: 3
Просмотров: 3559
Последний ответ 13.11.2007, 14:06:28
от archer1981