[MobileDetect] Мобильная версия для вашего сайта

Предлагаю вашему вниманию новое дополнение для создания мобильной версии сайта.

Еще вчера утром я не знал, что буду его писать, но так вышло. Логика целиком повторяет Mobile Detection из официального репозитория, но:
  • Используется класс mobiledetect.net
  • Отдельно определяются планшеты
  • Всё написано с нуля, так что код гораздо лучше
  • Тем более, что оригинал не обновлялся с мая 2011 года
Демо-страничка находится здесь, а под катом описание работы.

Принцип работы


Плагин парсит страницу при выводе и убирает из неё теги для других версий устройств.

Всего можно использовать три вида тегов: standard, tablet и mobile.
<!DOCTYPE html>
<html>
<head>
	<title>[[++site_name]] - [[*pagetitle]]</title>
	<base href="[[++site_url]]" />
</head>
<body>
	<standard><p>This is a <b>standard</b> view.</p></standard>
	<tablet><p>This is a <b>tablet</b> view.</p></tablet>
	<mobile><p>This is a <b>mobile</b> view.</p></mobile>
	<p>Parse time: [^t^]</p>
</body>
</html>

Если посетитель заходит на сайт с мобильного — убирается контент тегов standard и tablet. Если с компьютера — то tablet и mobile. Таким образом, вы легко можете организовать мобильную версию сайта.

Проблем с кэшированием нет, потому что ненужные теги убираются при выводе юзеру. Работает это быстро, простейшие регулярки.

Настройки


Все возможные опции вынесены в системные настройки. Это значит, что их можно указывать раздельно для каждого контекста.
  • disable_plugin — Выключить плагин
  • use_cookie — Запоминать тип браузера юзера.
  • tablet_is_standard — Считать планшеты компьютерами и выводить для них тег standard.
  • + разные настройки для указания переменных и тегов версий


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

Заключение


Компонент уже можно загрузить из магазина, безвозмездно.

Исходный код в репозитории на GitHub. Встроенный Mobile Detect в директории core можно без проблем обновлять из его репозитория.

Посмотреть в работе можно на демо-сайте.

Если вам хочется отблагодарить автора за проделанную работу — это можно сделать у меня на сайте.
Василий Наумкин
19 марта 2015, 14:43
modx.pro
6
10 992
+16

Комментарии: 45

Дмитрий Иванов
19 марта 2015, 18:43
0
шикарно. спасибо.
Только не качает:
Не могу скачать пакет в: store.simpledream.ru/extras/download?package_id=96&version_id=387&username=***&api_key=***&http_host=***
Павел Левин
20 марта 2015, 10:49
0
Адаптив уже не популярен? Или это для уменьшения размера страниц?
    Василий Наумкин
    20 марта 2015, 10:59
    +1
    Конечно.

    Меньше вес — быстрее загрузка, плюс можно вообще иначе расположить элементы на странице. А могут быть еще и такие ситуации.

    Адаптив никто не отменяет. Если нравится — используй его, но это именно что адаптация, а не отдельная мобильная версия.
      Павел Левин
      20 марта 2015, 16:43
      0
      У автора поста проблема в том, что он не хочет использовать превьюшки и оверлеи, возможно смысл его сайта в подстановке фонового изображения или что-то типа, где важен исходный размер (пример не увидел).

      В остальном идея хорошая, многие кардинально меняют сайт и редиректят на поддомен.

      Не знаю на сколько это расширение может задержать первичный вызов страницы… м… кеширование, как он с ним будет работать? Запрет?

      Порой так хочется выиграть пару десятков миллисекунд при загрузке страницы, а статей на эту тему не так много.
        Василий Наумкин
        20 марта 2015, 18:18
        +1
        Не знаю на сколько это расширение может задержать первичный вызов страницы… м… кеширование, как он с ним будет работать? Запрет?

        В заметке же написано
        Проблем с кэшированием нет, потому что ненужные теги убираются при выводе юзеру. Работает это быстро, простейшие регулярки.
    Николаевич
    24 марта 2015, 00:56
    0
    Подскажите, есть ли отличия от этого компонента? modx.pro/help/3766/
      TITAN-UZ
      16 апреля 2015, 00:24
      0
      Как пользоваться внутри документа

      Шаблон
      <standard>
          [[$header]]
          [[$sidebar]]
          <div id="content">
              [[*content]]
          </div>
          [[$footer]]
      </standard>
      
      <mobile>
      [[$mheader]]
      	<div class="mainpane">
      		<h1>[[*pagetitle]]</h1>
      	</div>
      	    [[*content]]
      [[$mfooter]]
      </mobile>
      Содержимое ресурса

      <standard>
      <div class="content_container">
          [[fulltab]]
      </div>
      </standard>
      <mobile>
      [[fulltab]]
      </mobile>
        TITAN-UZ
        16 апреля 2015, 22:16
        0
        Как сформулировать $get_ запрос для standard и mobile?
        Для вывода Содержимое ресурса
          Konstantin
          17 апреля 2015, 10:57
          0
          Добавить к адресу ссылки ?get=zapros

          Или что? вопрос не понятен
          Dmitry Rodionov
          18 августа 2015, 12:09
          -1
          Если написать код с 2мя хедерами и футерами, то этот компонент работать не будет, код от минишопа или еще от чего будет добавлен только в один хедер и только в один футер и скорее всего в первый и последний соответственно, придется совмещать хедеры чтобы избежать этого
            Павел Гвоздь
            18 августа 2015, 19:47
            +3
            Можно написать один хедер и разделить его на 2 версии. А если этот компонент использовать в сочетании с Феном, то можно сделать гораздо больше и грамотнее.
              Василий Наумкин
              18 августа 2015, 20:53
              +1
              Зачем 2 head? У меня и в голову такого не приходило — я думал так:
              <head>
              	<standard>[[$Head_standard]]</standard>
              	<tablet>[[$Head_tablet]]</tablet>
              	<mobile>[[$Head_mobile]]</mobile>
              </head>
                Dmitry Rodionov
                18 августа 2015, 21:00
                0
                За тем что есть одна верстка чужая, и другая — новая, надо новую мобильную верстку добавить на сайт, а раз так то естественно и тут и там 2 хедера
                  Dmitry Rodionov
                  18 августа 2015, 21:08
                  0
                  когда ты видишь такой старый код:
                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html id="index-html" class="main_html_class no_bg no_user internal component js">
                  <head id="index-head" class="main_head_class head_not_empty head_create head_user head_js">
                  и новый:
                  <!doctype html>
                  <html>
                  <head>
                  конструкции типа:
                  <!DOCTYPE html <standard>PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</standard>>
                  <html <standard>id="index-html" class="main_html_class no_bg no_user internal component js"</standard>>
                  <head <standard>id="index-head" class="main_head_class head_not_empty head_create head_user head_js"</standard>>
                  нет желания городить, и не ясно как в итоге это воспримет парсер modx и куда будет вставлять свой код, и переписывать половину старого CSS, которое завязано на этих классах тоже желания нет
                    Павел Гвоздь
                    19 августа 2015, 07:13
                    0
                    Не знаю насколько правильно написан этот сниппет. Может Василий увидит — поможет, посоветует.

                    if( !$MobileDetect = $modx->getService('mobiledetect', 'MobileDetect', MODX_CORE_PATH . 'components/mobiledetect/') )
                    {
                    	return;
                    }
                    
                    $key = $MobileDetect->config['force_browser_variable'];
                    
                    $device = !empty($_GET) && array_key_exists($key, $_GET)
                    		? $modx->stripTags($_GET[$key])
                    		: '';
                    
                    if( empty($device) )
                    {
                    	$device = $MobileDetect->getSettings();
                    }
                    else {
                    	return $device;
                    }
                    
                    if( empty($device) )
                    {
                    	if( $MobileDetect->getDetector()->isMobile() )
                    	{
                    		return 'mobile';
                    	}
                    	else {
                    		return 'normal';
                    	}
                    }
                    else {
                    	return $device;
                    }
                Евгений
                11 октября 2015, 20:34
                0
                Десктоп определяет, а mobile нет. Почему так может быть?

                Если использую вообще чужой код — все работает корректно.

                <?php
                function mobile_detect()
                {
                    $user_agent = $_SERVER['HTTP_USER_AGENT'];
                
                    $ipod = strpos($user_agent,"iPod");
                    $iphone = strpos($user_agent,"iPhone");
                    $android = strpos($user_agent,"Android");
                    $symb = strpos($user_agent,"Symbian");
                    $winphone = strpos($user_agent,"WindowsPhone");
                    $wp7 = strpos($user_agent,"WP7");
                    $wp8 = strpos($user_agent,"WP8");
                    $operam = strpos($user_agent,"Opera M");
                    $palm = strpos($user_agent,"webOS");
                    $berry = strpos($user_agent,"BlackBerry");
                    $mobile = strpos($user_agent,"Mobile");
                    $htc = strpos($user_agent,"HTC_");
                    $fennec = strpos($user_agent,"Fennec/");
                	$nokia = strpos($user_agent,"Nokia");
                
                    if ($ipod || $iphone || $android || $symb || $winphone || $wp7 || $wp8 || $operam || $palm || $berry || $mobile || $htc || $fennec || $nokia) 
                    {
                        echo "mobile";
                    } 
                    else
                    {
                        echo "pc";
                    }
                }
                mobile_detect();
                  Максим
                  16 октября 2015, 14:39
                  0
                  Подскажите дополнение работает в MODX 2.4.2? А то у меня выводится только тег mobile для всех устройств.
                    Василий Наумкин
                    16 октября 2015, 15:31
                    +1
                    Должно, по идее.

                    Другой вопрос, что там сам файл с определением нужно обновлять регулярно, ибо выходят новые устройства, которые он не знает.
                      Максим
                      16 октября 2015, 16:41
                      0
                      да обычный домашний компьютер выводит:
                      This is a mobile view.
                      	Parse time: 0.0532 s
                      раньше уже пробовал MobileDetect и все отлично работало. Сам сайт union-box.ru/contacts. Версия PHP 5.5
                        Владимир
                        16 октября 2015, 20:43
                        0
                        Смотрю на ноутбуке- стандарт пишет, зашел с андроида- мобильный пишет.
                        Все ок. Нет?
                          Максим
                          17 октября 2015, 04:51
                          0
                          Наверно что то у меня на компьютере. Стал проверять на других и все нормально.
                        Евгений
                        27 ноября 2015, 21:34
                        0
                        а как?
                      Denis Marocco
                      03 ноября 2015, 15:28
                      0
                      Не работает в pdoPage c AJAX.
                        Sergey
                        07 марта 2016, 18:10
                        0
                        Я обратил внимание, что мобильная версия плагина работает только на физических устройствах.
                        Проверка адаптивного дизайна в инструменте веб-разработки показывает одновременно все три тега.
                        Интересно, как на это реагируют поисковики?
                          Борис И
                          08 марта 2016, 19:58
                          0
                          Вы проверьте например, тут beta.webmaster.yandex.ru «Проверка мобильных страниц» как видит яндекс страницу сайта оптимизированную для мобильных. У меня, все хорошо.
                          konar777
                          07 апреля 2016, 00:07
                          0
                          у меня конфликт с shopkeeper если в шаблоне присутствуют теги shopkeeper не выводит корзину.
                            uplink-d3
                            04 августа 2016, 11:59
                            0
                            У меня конфликт с mFilter2 и если в одном шаблоне два фильтра, то самый нижний перезаписывает верхний. Как быть?
                              Владимир
                              01 декабря 2016, 12:10
                              0
                              Доброго дня!
                              Василий, обновление файлов mobiledetect.net/ сейчас весьма существенно улучшает определение устройств. Если будет у тебя возможность, плиз, обновленный пакет не помешал бы в магазине.
                              PS проверял в новомодном браузере blisk.io — все срабатывает, чует он юзер агент четко.

                              PS правда, обновленный мной mobiledetect срабатывает не всегда, ищу что не так:)
                              Владимир
                              01 декабря 2016, 12:36
                              0
                              МЕЧТЫ: Вообще вот так бы определял [MobileDetect] как на видео скриншоте снятым blisk.io с demo.mobiledetect.net, эх, как было бы прекрасно!
                                Роман
                                12 октября 2018, 14:57
                                0
                                Как объединить tablet mobile в вызове? К примеру:
                                {if 'standard' | mobiledetect}
                                    <p>Descktop</p>
                                {/if}
                                
                                {if 'tablet','mobile' | mobiledetect}
                                    <p>Mobile</p>
                                {/if}
                                  Сергей Шлоков
                                  13 октября 2018, 08:43
                                  0
                                  В modHelpers это можно сделать так
                                  {if is_mobile() || is_tablet()}
                                      <p>Mobile</p>
                                  {/if}
                                  Вообще, по-моему, планшеты — это подмножество мобильных устройств. Т.е. mobile — это и телефоны и планшеты.
                                    Роман
                                    13 октября 2018, 08:49
                                    0
                                    Можно по подробнее modHelpers что за зверь, где взять как приготовить?

                                    п.с. по поводу что это одно и тоже согласен, если человеку нужен полный сайт, то для это есть кнопка у них — отобразить полный сайт!
                                      Сергей Шлоков
                                      13 октября 2018, 08:59
                                      0
                                      Документация по modHelpers.

                                      п.с. по поводу что это одно и тоже согласен, если человеку нужен полный сайт, то для это есть кнопка у них — отобразить полный сайт!
                                      Так в документации mobileDetect написано.
                                Александр
                                19 марта 2019, 12:16
                                0
                                Приветствую.
                                Подскажите по поводу этой ошибки, консоль заспамлена прям ей.
                                [2019-03-19 16:03:52] (ERROR @ /home/.../docs/core/components/mobiledetect/mobiledetect.class.php: 81) PHP warning: Expiry date cannot have a year greater than 9999
                                  Антон
                                  05 апреля 2019, 14:26
                                  0
                                  На 2.7.0, к сожалению, текущая версия не заводится. Стоит ли ждать обновления?
                                  В системных настройках в разделе MobileDetect пусто и сниппет MobileDetect не появился.
                                    Андрей
                                    05 апреля 2019, 15:47
                                    +1
                                    99.9% проблема на вашей стороне, смотрите логи. Проверил на modhost — версия 2.7.1, и на паре рабочих сайтов, 2.7.0 и 2.6.5 хостинг джино, всё работает.
                                      Антон
                                      08 апреля 2019, 10:58
                                      0
                                      Да, моя ошибка. Нечаянно скачал Mobile Detection. Не сменил репозиторий.
                                    Andrew
                                    23 февраля 2020, 06:53
                                    0
                                    Странно, но у меня компонент не хочет работать.
                                    Вставил на страницу:
                                    {if 'standard' | mobiledetect}
                                        <p>This is a <b>standard</b> view via Fenom output filter.</p>
                                    {/if}
                                    
                                    {if 'tablet' | mobiledetect}
                                        <p>This is a <b>tablet</b> view via Fenom output filter.</p>
                                    {/if}
                                    
                                    {if 'mobile' | mobiledetect}
                                        <p>This is a <b>mobile</b> view via Fenom output filter.</p>
                                    {/if}
                                    На экран выводится «This is a mobile view via Fenom output filter.» как на компьютере так и на мобилке. Пробовал в шаблоне, в чанке, во вложеном в чанк, чанке. Не хочет работать хоть ты тресни.
                                    Кто-нибудь сталкивался с подобным?
                                      Анастасия
                                      17 июня 2020, 11:36
                                      0
                                      Подскажите, а компонент уже нельзя скачать? Не находит его
                                        Андрей
                                        17 июня 2020, 14:18
                                        0
                                        Скорее всего не в том репозитории смотрите. Переключите на modstore, всё доступно — MobileDetect
                                        Sergey
                                        03 ноября 2021, 08:46
                                        0
                                        Всем привет. Подскажите пожалуйста, установлен последний MobileDetect и к сожалению не коректно работает вывод для планшета (tablet).
                                        [[!MobileDetect:is=`1`:then=`<p>This is a <b>tablet</b> view via Snippet tag.</p>`:else=``?input=`tablet`]]

                                        Почему то если зайти с Ipad или другого планшета, все равно показывает версию для Десктопа (standard)а точнее то что тут
                                        [[!MobileDetect:is=`1`:then=`<p>This is a <b>standard</b> view via Snippet tag.</p>`:else=``?input=`standard`]]
                                        На телефоне работает. В настройках стоит «Считать планшеты десктопом» — НЕТ.
                                        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                                        45