Условия вывода модуля при определенном разрешении экрана

  • 8 Ответов
  • 143 Просмотров

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

Всем привет!сайт fishkasecond.tmweb.ru/sushi .Есть html-модуль вывода параллакс-блока. От <640px разрешения экрана данный блок хочу скрыть в самом коде. Пока скрыл его через CSS, но это плохая реализация (скорость загрузки страницы). Подскажите как на php запретить отображение модуля на определенном разрешении. Спасибо! Если продублировал тему, извините...не нашел похожего. В качестве примера хочу скрыть блок"position-akzii"
Код
<jdoc:include type="modules" name="position-after-header" style="xhtml" />
<jdoc:include type="component" style="xhtml"/>
<jdoc:include type="modules" name="position-after-content" style="xhtml" />
<jdoc:include type="modules" name="position-akzii" style="xhtml" />
<jdoc:include type="modules" name="position-before-footer" style="xhtml" />
<jdoc:include type="modules" name="position-footer" style="xhtml" />

*

1-F7

  • ****
  • 209
  • 0
Оберните позицыю модуля в <div class="тест">

Код
<div class="test">
<jdoc:include type="modules" name="position-after-content" style="xhtml" />
</div>

Затем задайте стиль с помощью медиа запроса в CSS

Код
@media screen and (max-width: 750px){.mobile{display:none}}


В моем примере класс "тест" будет скрываться если расширения экрана меньше 750 px.

В общем почитайте в интернете по медиа запросом и изучите стиль.

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
Подскажите как на php запретить отображение модуля на определенном разрешении.

Посредством PHP узнать (подстраиваться) разрешение экрана нельзя.

Или через jQuery или @media.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

robert

  • ********
  • 4002
  • 371
1-F7, читайте повнимательнее: ТС написал
Пока скрыл его через CSS
Ruslan Chester, когда сервер готовит запрашиваемую страницу, он не имеет понятия, какое разрешение у клиента: такой информации нет в заголовках запроса. Разрешение определяется на стороне браузера, когда страница уже пришла в готовом виде, посредством CSS или JavaScript. Так что нет способа заранее узнать разрешение экрана, если только не записать его в cookies, но и это не будет работать для первого раза.
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

1-F7

  • ****
  • 209
  • 0
Ну это понятно. Пусть сам тогда думает над размерами разрешения своего сайта.


Выношу необтесанное решение на суд гуру и может это кому-нибудь поможет...Была задача: наладить взаимодействие некоторого блока на сайте при определенном разрешении экрана, но не легким способом через медиа-запросы а накорню, чтобы не нагружать сервер излишними запросами на ресурсы.Делать мобильную версию не хотелось, только адаптивную.Если очень коротко, то внутри произвольного модуля вставил
Код
<script>if(window.matchMedia('(max-width: 768px)').matches)
{
  document.write('весь html-код модуля');
    } else;
     
    return false;</script>
Первоисточник https://danilin.biz/media-query-in-jquery.htm   .Необходимо при этом также убрать пробелы перед тегами внутри вставляемого кода(.replace), но я просто вручную убрал. Полученный итог:
 похож на RESS(при изменении размера окна браузера блок не добавляется и не убирается - только при перезагрузке страницы) и самое главное нет ненужных запросов к серверу(я избавился так от 10 загружаемых больших изображений, которые мне не нужны были на телефонах и планшетах).Пытался подобное произвести через вызов модуля из index.php, но не смог сладить с пробелами
Код
<script>if(window.matchMedia('(max-width: 768px)').matches)
{
  document.write('<jdoc:include type="modules" name="position-after-content" style="xhtml" />');
    } else;
     
    return false;</script>
Явно "америку" не открыл, но интересно почитать мнения профи

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
К слову. Разрешение экрана и разрешение браузера-разные вещи.
Насколько я помню, есть отличие между ними, просто пример, если через функцию:

$(function() {
    if(screen.height<768) {

и

$(function() {
    if($(window).height()<768) {
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

.matchMedia даст истинный размер окна браузера с учетом отступов и полос прокрутки. Но это не принципиально для малых девайсов