Шаблон страницы под разные расширения монитора

Главные вкладки

EnergY2010 17 января 2009 в 15:52

Помогите пожалуйста. Как создать шаблоны темы под разные расширения монитора?

Drupal6

передавать в php разрешение. можно через куки можно через сессию. Но на практике при включенном кешировании не всегда срабатывает.
Для установки куков у меня такой js был.

function setCoo (){

document.cookie = "ek_x=" + screen.availWidth;

document.cookie = "ek_y=" + screen.availHeight; 
}var EkOnload = window.onload;

window.onload = function () { if(EkOnload) EkOnload(); setCoo();

}

На сервере читаем

<?php 
if ($_COOKIE['ek_x']>0){
$ek_x = $_COOKIE['ek_x'];
}
else {$ek_x = 1024;}
?>

EnergY2010 17 января 2009 в 17:11

Можно более подробно обьяснить что нужно делать?

Химический Али 17 января 2009 в 18:01

а) Нужно узнать какое расширение у пользователя и в зависимости от этого отдать ему тот или ной код шаблона.

v1adimir 17 января 2009 в 18:05

некоректный какой-то вопрос... узнать текущее разрешение монитора друпал может только после выполнения js скрипта на клиенте. а скрипт нужно клиенту предварительно отдать, то есть загрузить страницу в какой-то дефолтной теме.

в общем как ты себе представляешь протокол работы, что за чем показывается?

HIgor1968 17 января 2009 в 19:19

Собственно это я и написал. Код работает. Передаем через куки разрешение монитора клиента. И сервером это перерабатываем.

FORTIS 17 января 2009 в 20:13

может ему просто резиновая верстка нужна? )

HIgor1968 17 января 2009 в 20:20

Может...., но автор нем .....

EnergY2010 19 января 2009 в 13:42

Нет мне не нужна резиновая верстка, а нужно порядок действий: что где нужно прописывать чтоб узнать разрешение монитора и как отдать той или иной шаблон под разрешение клиентского монитора?

HIgor1968 19 января 2009 в 14:19

Я собственно и написал один из вариантов, как дать разрешение от клиента, как его на серваке подобрать. Обрабатывай на здоровье, что не ясно? Только нормально работать не будет при кешировании. Я использовал этот метод на живом сайте - все работало. Большинству все равно хватит некоего стандартного разрешения 1024 Х 768. Если надо охватить пользователей с КПК, то лучше ил поддомен отвести. Если сильно надо именно шаблоны, то используй что я написал + можешь кнопку поставить на сайте для показа под конкретное разрешение.

FORTIS 20 января 2009 в 12:13

HIgor1968, твой метод как в Опере так и в ИЕ будет работать?

HIgor1968 20 января 2009 в 13:20

Проблем не возникало.
Там все просто JS куки ставит, PHP читает. Напрямую работает только после повторной перезагрузки страницы. Надо дорабатывать. Или обходные пути, например универсальная для разных разрешений страница приветствия. На которой и установим куки, а далее сайт грузим уже зная разрешение клиента.

FORTIS 27 января 2009 в 23:48

screen.availWidth возвращает ширину окна, а не экрана. Ширину экрана возвращает screen.width, хотя помоему это не для всех браузеров работает одинкаово.

HIgor1968 28 января 2009 в 0:23

Да, конечно. Я получал окно, поэтому скопировал код какой был. Передать хоть размер экрана, хоть окна можно только JS и после формирования страницы, т.е. экран можно подстроить под разрешение клиента только на второй странице, когда куки с разрешением уже установлены.

FORTIS 28 января 2009 в 3:02

В page.tpl.php после тэга

<body>

вставил:

<script language='JavaScript'>

var EkOnload = window.onload;

window.onload = function () {

        if(EkOnload)

                EkOnload();

        document.cookie = "ek_x=" + screen.availWidth;

        document.cookie = "ek_y=" + screen.availHeight; 

}

</script>

в кукисы пишет, спасибо.

После

<?php print $styles; ?>

вставил:

<?php 

  print '<link rel="stylesheet" type="text/css" href="' . base_path() . path_to_theme() . '/res_';

  if ($_COOKIE['ek_x']>1024)

    {

    print 'big.css"/>';

    }

  else

    {

    print 'default.css"/>';

    }

?>

Теперь в res_big.css осталось прописать стили для больших разрешений и в res_default.css для 1024x768 и меньше Думаю всё получится )

HIgor1968 28 января 2009 в 8:15

Красивее будет, если js отдельным файлом сделаешь и в инфо темы добавишь.

scripts[] = ek.js

Тогда в HEAD ,блоке включаться JS будет.

FORTIS 28 января 2009 в 14:26

попробую, он тогда и при оптимизации в 6ом друпале будет сжиматься как и все остальные в один файл, наверно

HIgor1968 28 января 2009 в 15:14

Да

WiseMan 28 января 2009 в 15:33

Вот еще простой пример как можно стили подсовывать в зависимости от разрешения экрана

<script language="JavaScript">
<!--
var correctwidth1=800
if(screen.width==correctwidth1)

document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/1_new.css\">");
var correctwidth2=1024

if (screen.width==correctwidth2) 

document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/2_new.css\">");
var correctwidth3=1152

if (screen.width==correctwidth3) 

document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/3_new.css\">");
var correctwidth4=1280

if (screen.width>=correctwidth4) 

document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/4_new.css\">");

// -->

</script>

FORTIS 28 января 2009 в 22:11

А что если в скрипт, который сохраняет разрешение экрана в кукис, сунуть проверку: если в кукисе нет значений ширины/высоты экрана, то сохранить их и тут же перезагрузить страничку?

Тут немного на понимание яваскрипта, а я то с ним не особо близок, вот и хочу узнать - можно ли такое реализовать и как? То, что страничку перезагрузить средствами яваскрипта можно - я знаю, но скрипт вызовется во время загрузки страницы или перед загрузкой, или все-таки после? Если скрипт вызовется вконце, то былоб некрасиво делать обновление обновление страницы ))

HIgor1968 28 января 2009 в 22:36

Тоже ничего в голову не идет кроме входной страницы на сайт. Типа подождите пару секунд, сейчас все будет.

WiseMan 29 января 2009 в 1:30

Чем вас вариант подстановки стилей в зависимости от разрешения экрана не устраивает?

При верстке для темы делается 1 файл стилей основной - который используется в любом случае + несколько файлов стилей по одному под каждое расширение.

Последние ставятся в тему после строки включения основных стилей. И все дела. Ребят, зачем усложнять-то.

FORTIS 29 января 2009 в 2:14

Хыхех, не вгляделся. Ну да с document.write можно откинуть кукисы

HIgor1968 29 января 2009 в 10:52

Увидеть, я увидел, но прошло мимо ушей;) Спасибо WiseMan. Вопрос исчерпан.

klim 17 ноября 2009 в 15:42

Добрый день.
JS скрипт работает, из кукисов читается.

Вопрос следующий:
В браузере (FireFox например) жму ctrl+колесо - картинка в браузере уменьшается.
из кукисов, естественно, читают все теже значения экрана.
как быть в такой ситуации как масштабировать сайт у пользователей, которые меняют масштаб внутри браузера, поидее при обновлении странички надо бы им что-то более симпатичное показывать, чем они получают!?

Спасибо.

lopata24 3 февраля 2010 в 12:19

висело в закладках и только сейчас начал реализовывать!
пребываю в приятном шоке ))) Здорово!!!

lopata24 26 февраля 2010 в 16:01

а вот вопрос такой
будет ли работать этот вариант для мобильных устройств???

<script language="JavaScript">
<!--
var correctwidth1=1280
if(screen.width==correctwidth1)

document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/1_new.css\">");

var correctwidth2=240
if(screen.width==correctwidth2)

document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/2_new.css\">");
// -->

</script>

то есть если указать ширину 240?
никто не проверял на практике? и как должно быть в теории?

Tail565 24 апреля 2010 в 17:08

В файле page.tpl.php после <?php print $styles ?> и <?php print $scripts ?> использую конструкцию:

<script language="JavaScript">

var correctwidth1=800

if (screen.width<correctwidth1)

document.write("<link rel=\"stylesheet\" type=\"text/css\" 

href=\"sites/all/themes/greenNblack/style_mobile.css\">");

</script>

Работает для главной страницы, а для остальных не работает, в чем может быть проблема, кто знает?

Виктор Степаньк... 24 апреля 2010 в 17:10

В том, что вы, батенька, используете винду и не отличаете путь с "/" от путя без "/"

Drupal Drupal на русском

Шаблон страницы под разные расширения монитора

Главные вкладки

Комментарии