[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

14 458

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

Дмитрий Иванов

19 марта 2015, 18:43

шикарно. спасибо.
Только не качает:
Не могу скачать пакет в: store.simpledream.ru/extras/download?package_id=96&version_id=387&username=***&api_key=***&http_host=***

Василий Наумкин

19 марта 2015, 19:40

Ой, поправил, спасибо.

Павел Левин

20 марта 2015, 10:49

Адаптив уже не популярен? Или это для уменьшения размера страниц?

Василий Наумкин

20 марта 2015, 10:59

Конечно.

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

Адаптив никто не отменяет. Если нравится — используй его, но это именно что адаптация, а не отдельная мобильная версия.

Павел Левин

20 марта 2015, 16:43

У автора поста проблема в том, что он не хочет использовать превьюшки и оверлеи, возможно смысл его сайта в подстановке фонового изображения или что-то типа, где важен исходный размер (пример не увидел).

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

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

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

Василий Наумкин

20 марта 2015, 18:18

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

В заметке же написано

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

Николаевич

24 марта 2015, 00:56

Подскажите, есть ли отличия от этого компонента? modx.pro/help/3766/

TITAN-UZ

16 апреля 2015, 00:24

Как пользоваться внутри документа

Шаблон

<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

Как сформулировать $get_ запрос для standard и mobile?
Для вывода Содержимое ресурса

Konstantin

17 апреля 2015, 10:57

Добавить к адресу ссылки ?get=zapros

Или что? вопрос не понятен

Dmitry Rodionov

18 августа 2015, 12:09

Если написать код с 2мя хедерами и футерами, то этот компонент работать не будет, код от минишопа или еще от чего будет добавлен только в один хедер и только в один футер и скорее всего в первый и последний соответственно, придется совмещать хедеры чтобы избежать этого

Павел Гвоздь

18 августа 2015, 19:47

Можно написать один хедер и разделить его на 2 версии. А если этот компонент использовать в сочетании с Феном, то можно сделать гораздо больше и грамотнее.

Василий Наумкин

18 августа 2015, 20:53

Зачем 2 head? У меня и в голову такого не приходило — я думал так:

<head>
	<standard>[[$Head_standard]]</standard>
	<tablet>[[$Head_tablet]]</tablet>
	<mobile>[[$Head_mobile]]</mobile>
</head>

Dmitry Rodionov

18 августа 2015, 21:00

За тем что есть одна верстка чужая, и другая — новая, надо новую мобильную верстку добавить на сайт, а раз так то естественно и тут и там 2 хедера

Dmitry Rodionov

18 августа 2015, 21:08

когда ты видишь такой старый код:

<!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

Не знаю насколько правильно написан этот сниппет. Может Василий увидит — поможет, посоветует.

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

Десктоп определяет, а 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

Подскажите дополнение работает в MODX 2.4.2? А то у меня выводится только тег mobile для всех устройств.

Василий Наумкин

16 октября 2015, 15:31

Должно, по идее.

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

Максим

16 октября 2015, 16:41

да обычный домашний компьютер выводит:

This is a mobile view.
	Parse time: 0.0532 s

раньше уже пробовал MobileDetect и все отлично работало. Сам сайт union-box.ru/contacts. Версия PHP 5.5

Владимир

16 октября 2015, 20:43

Смотрю на ноутбуке- стандарт пишет, зашел с андроида- мобильный пишет.
Все ок. Нет?

Максим

17 октября 2015, 04:51

Наверно что то у меня на компьютере. Стал проверять на других и все нормально.

Евгений

27 ноября 2015, 21:34

а как?

Denis Marocco

03 ноября 2015, 15:28

Не работает в pdoPage c AJAX.

Sergey

07 марта 2016, 18:10

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

Борис И

08 марта 2016, 19:58

Вы проверьте например, тут beta.webmaster.yandex.ru «Проверка мобильных страниц» как видит яндекс страницу сайта оптимизированную для мобильных. У меня, все хорошо.

konar777

07 апреля 2016, 00:07

у меня конфликт с shopkeeper если в шаблоне присутствуют теги shopkeeper не выводит корзину.

uplink-d3

04 августа 2016, 11:59

У меня конфликт с mFilter2 и если в одном шаблоне два фильтра, то самый нижний перезаписывает верхний. Как быть?

Владимир

01 декабря 2016, 12:10

Доброго дня!
Василий, обновление файлов mobiledetect.net/ сейчас весьма существенно улучшает определение устройств. Если будет у тебя возможность, плиз, обновленный пакет не помешал бы в магазине.
PS проверял в новомодном браузере blisk.io — все срабатывает, чует он юзер агент четко.

PS правда, обновленный мной mobiledetect срабатывает не всегда, ищу что не так:)

Владимир

01 декабря 2016, 15:18

тоже видео, но в облаке, неделю там лежать будет app.blisk.io/screenrecords/Shared/579804f8-2d89-4737-957c-1afc6bacc08f (так, вроде, удобнее посмотреть)

Владимир

01 декабря 2016, 12:36

МЕЧТЫ: Вообще вот так бы определял [MobileDetect] как на видео скриншоте снятым blisk.io с demo.mobiledetect.net, эх, как было бы прекрасно!

Роман

12 октября 2018, 14:57

Как объединить tablet mobile в вызове? К примеру:

{if 'standard' | mobiledetect}
    <p>Descktop</p>
{/if}

{if 'tablet','mobile' | mobiledetect}
    <p>Mobile</p>
{/if}

Сергей Шлоков

13 октября 2018, 08:43

В modHelpers это можно сделать так

{if is_mobile() || is_tablet()}
    <p>Mobile</p>
{/if}

Вообще, по-моему, планшеты — это подмножество мобильных устройств. Т.е. mobile — это и телефоны и планшеты.

Роман

13 октября 2018, 08:49

Можно по подробнее modHelpers что за зверь, где взять как приготовить?

п.с. по поводу что это одно и тоже согласен, если человеку нужен полный сайт, то для это есть кнопка у них — отобразить полный сайт!

Сергей Шлоков

13 октября 2018, 08:59

Документация по modHelpers.

п.с. по поводу что это одно и тоже согласен, если человеку нужен полный сайт, то для это есть кнопка у них — отобразить полный сайт!

Так в документации mobileDetect написано.

Александр

19 марта 2019, 12:16

Приветствую.
Подскажите по поводу этой ошибки, консоль заспамлена прям ей.
[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

На 2.7.0, к сожалению, текущая версия не заводится. Стоит ли ждать обновления?
В системных настройках в разделе MobileDetect пусто и сниппет MobileDetect не появился.

Андрей

05 апреля 2019, 15:47

99.9% проблема на вашей стороне, смотрите логи. Проверил на modhost — версия 2.7.1, и на паре рабочих сайтов, 2.7.0 и 2.6.5 хостинг джино, всё работает.

Антон

08 апреля 2019, 10:58

Да, моя ошибка. Нечаянно скачал Mobile Detection. Не сменил репозиторий.

Andrew

23 февраля 2020, 06:53

Странно, но у меня компонент не хочет работать.
Вставил на страницу:

{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

Подскажите, а компонент уже нельзя скачать? Не находит его

Андрей

17 июня 2020, 14:18

Скорее всего не в том репозитории смотрите. Переключите на modstore, всё доступно — MobileDetect

Sergey

03 ноября 2021, 08:46

Всем привет. Подскажите пожалуйста, установлен последний 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`]]

На телефоне работает. В настройках стоит «Считать планшеты десктопом» — НЕТ.

Алексей Смирнов

03 ноября 2021, 21:02

Может потому что ?input ставите после условий проверки?

Sergey

03 ноября 2021, 21:05

https://modstore.pro/packages/utilities/mobiledetect Брал вывод с доков. Телефон работает, а планшет нет

Niyaz

13 января 2023, 11:59

Здравствуйте!

Большое спасибо за плагин! До этого использовал Mobile Detection, но на php8.1 он почему то не заработал. Установил Ваш плагин — все заработало, даже переделывать ничего не пришлось.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

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

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

Настройки

Заключение

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

Здесь упомянуты