[MobileDetect] Мобильная версия для вашего сайта
Предлагаю вашему вниманию новое дополнение для создания мобильной версии сайта.
Еще вчера утром я не знал, что буду его писать, но так вышло. Логика целиком повторяет Mobile Detection из официального репозитория, но:
Плагин парсит страницу при выводе и убирает из неё теги для других версий устройств.
Всего можно использовать три вида тегов: standard, tablet и mobile.
Если посетитель заходит на сайт с мобильного — убирается контент тегов standard и tablet. Если с компьютера — то tablet и mobile. Таким образом, вы легко можете организовать мобильную версию сайта.
Проблем с кэшированием нет, потому что ненужные теги убираются при выводе юзеру. Работает это быстро, простейшие регулярки.
Все возможные опции вынесены в системные настройки. Это значит, что их можно указывать раздельно для каждого контекста.
Помимо автоопределения, можно и напрямую указывать требуемую версию через url.
Компонент уже можно загрузить из магазина, безвозмездно.
Исходный код в репозитории на GitHub. Встроенный Mobile Detect в директории core можно без проблем обновлять из его репозитория.
Посмотреть в работе можно на демо-сайте.
Если вам хочется отблагодарить автора за проделанную работу — это можно сделать у меня на сайте.
Еще вчера утром я не знал, что буду его писать, но так вышло. Логика целиком повторяет 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 можно без проблем обновлять из его репозитория.
Посмотреть в работе можно на демо-сайте.
Если вам хочется отблагодарить автора за проделанную работу — это можно сделать у меня на сайте.
Комментарии: 46
шикарно. спасибо.
Только не качает:
Не могу скачать пакет в: store.simpledream.ru/extras/download?package_id=96&version_id=387&username=***&api_key=***&http_host=***
Только не качает:
Не могу скачать пакет в: store.simpledream.ru/extras/download?package_id=96&version_id=387&username=***&api_key=***&http_host=***
Ой, поправил, спасибо.
Адаптив уже не популярен? Или это для уменьшения размера страниц?
Конечно.
Меньше вес — быстрее загрузка, плюс можно вообще иначе расположить элементы на странице. А могут быть еще и такие ситуации.
Адаптив никто не отменяет. Если нравится — используй его, но это именно что адаптация, а не отдельная мобильная версия.
Меньше вес — быстрее загрузка, плюс можно вообще иначе расположить элементы на странице. А могут быть еще и такие ситуации.
Адаптив никто не отменяет. Если нравится — используй его, но это именно что адаптация, а не отдельная мобильная версия.
У автора поста проблема в том, что он не хочет использовать превьюшки и оверлеи, возможно смысл его сайта в подстановке фонового изображения или что-то типа, где важен исходный размер (пример не увидел).
В остальном идея хорошая, многие кардинально меняют сайт и редиректят на поддомен.
Не знаю на сколько это расширение может задержать первичный вызов страницы… м… кеширование, как он с ним будет работать? Запрет?
Порой так хочется выиграть пару десятков миллисекунд при загрузке страницы, а статей на эту тему не так много.
В остальном идея хорошая, многие кардинально меняют сайт и редиректят на поддомен.
Не знаю на сколько это расширение может задержать первичный вызов страницы… м… кеширование, как он с ним будет работать? Запрет?
Порой так хочется выиграть пару десятков миллисекунд при загрузке страницы, а статей на эту тему не так много.
Не знаю на сколько это расширение может задержать первичный вызов страницы… м… кеширование, как он с ним будет работать? Запрет?
В заметке же написано
Проблем с кэшированием нет, потому что ненужные теги убираются при выводе юзеру. Работает это быстро, простейшие регулярки.
Подскажите, есть ли отличия от этого компонента? modx.pro/help/3766/
Как пользоваться внутри документа
Шаблон
Шаблон
<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>
Как сформулировать $get_ запрос для standard и mobile?
Для вывода Содержимое ресурса
Для вывода Содержимое ресурса
Добавить к адресу ссылки ?get=zapros
Или что? вопрос не понятен
Или что? вопрос не понятен
Если написать код с 2мя хедерами и футерами, то этот компонент работать не будет, код от минишопа или еще от чего будет добавлен только в один хедер и только в один футер и скорее всего в первый и последний соответственно, придется совмещать хедеры чтобы избежать этого
Можно написать один хедер и разделить его на 2 версии. А если этот компонент использовать в сочетании с Феном, то можно сделать гораздо больше и грамотнее.
Зачем 2 head? У меня и в голову такого не приходило — я думал так:
<head>
<standard>[[$Head_standard]]</standard>
<tablet>[[$Head_tablet]]</tablet>
<mobile>[[$Head_mobile]]</mobile>
</head>
За тем что есть одна верстка чужая, и другая — новая, надо новую мобильную верстку добавить на сайт, а раз так то естественно и тут и там 2 хедера
когда ты видишь такой старый код:
<!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, которое завязано на этих классах тоже желания нет
Не знаю насколько правильно написан этот сниппет. Может Василий увидит — поможет, посоветует.
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;
}
Десктоп определяет, а 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();
Подскажите дополнение работает в MODX 2.4.2? А то у меня выводится только тег mobile для всех устройств.
Должно, по идее.
Другой вопрос, что там сам файл с определением нужно обновлять регулярно, ибо выходят новые устройства, которые он не знает.
Другой вопрос, что там сам файл с определением нужно обновлять регулярно, ибо выходят новые устройства, которые он не знает.
да обычный домашний компьютер выводит:
This is a mobile view.
Parse time: 0.0532 s
раньше уже пробовал MobileDetect и все отлично работало. Сам сайт union-box.ru/contacts. Версия PHP 5.5
Смотрю на ноутбуке- стандарт пишет, зашел с андроида- мобильный пишет.
Все ок. Нет?
Все ок. Нет?
Наверно что то у меня на компьютере. Стал проверять на других и все нормально.
а как?
Не работает в pdoPage c AJAX.
Я обратил внимание, что мобильная версия плагина работает только на физических устройствах.
Проверка адаптивного дизайна в инструменте веб-разработки показывает одновременно все три тега.
Интересно, как на это реагируют поисковики?
Проверка адаптивного дизайна в инструменте веб-разработки показывает одновременно все три тега.
Интересно, как на это реагируют поисковики?
Вы проверьте например, тут beta.webmaster.yandex.ru «Проверка мобильных страниц» как видит яндекс страницу сайта оптимизированную для мобильных. У меня, все хорошо.
у меня конфликт с shopkeeper если в шаблоне присутствуют теги shopkeeper не выводит корзину.
У меня конфликт с mFilter2 и если в одном шаблоне два фильтра, то самый нижний перезаписывает верхний. Как быть?
Доброго дня!
Василий, обновление файлов mobiledetect.net/ сейчас весьма существенно улучшает определение устройств. Если будет у тебя возможность, плиз, обновленный пакет не помешал бы в магазине.
PS проверял в новомодном браузере blisk.io — все срабатывает, чует он юзер агент четко.
PS правда, обновленный мной mobiledetect срабатывает не всегда, ищу что не так:)
Василий, обновление файлов mobiledetect.net/ сейчас весьма существенно улучшает определение устройств. Если будет у тебя возможность, плиз, обновленный пакет не помешал бы в магазине.
PS проверял в новомодном браузере blisk.io — все срабатывает, чует он юзер агент четко.
PS правда, обновленный мной mobiledetect срабатывает не всегда, ищу что не так:)
тоже видео, но в облаке, неделю там лежать будет app.blisk.io/screenrecords/Shared/579804f8-2d89-4737-957c-1afc6bacc08f (так, вроде, удобнее посмотреть)
МЕЧТЫ: Вообще вот так бы определял [MobileDetect] как на видео скриншоте снятым blisk.io с demo.mobiledetect.net, эх, как было бы прекрасно!
Как объединить tablet mobile в вызове? К примеру:
{if 'standard' | mobiledetect}
<p>Descktop</p>
{/if}
{if 'tablet','mobile' | mobiledetect}
<p>Mobile</p>
{/if}
В modHelpers это можно сделать так
{if is_mobile() || is_tablet()}
<p>Mobile</p>
{/if}
Вообще, по-моему, планшеты — это подмножество мобильных устройств. Т.е. mobile — это и телефоны и планшеты.
Можно по подробнее modHelpers что за зверь, где взять как приготовить?
п.с. по поводу что это одно и тоже согласен, если человеку нужен полный сайт, то для это есть кнопка у них — отобразить полный сайт!
п.с. по поводу что это одно и тоже согласен, если человеку нужен полный сайт, то для это есть кнопка у них — отобразить полный сайт!
Документация по modHelpers.
п.с. по поводу что это одно и тоже согласен, если человеку нужен полный сайт, то для это есть кнопка у них — отобразить полный сайт!Так в документации mobileDetect написано.
Приветствую.
Подскажите по поводу этой ошибки, консоль заспамлена прям ей.
[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
Подскажите по поводу этой ошибки, консоль заспамлена прям ей.
[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
На 2.7.0, к сожалению, текущая версия не заводится. Стоит ли ждать обновления?
В системных настройках в разделе MobileDetect пусто и сниппет MobileDetect не появился.
В системных настройках в разделе MobileDetect пусто и сниппет MobileDetect не появился.
99.9% проблема на вашей стороне, смотрите логи. Проверил на modhost — версия 2.7.1, и на паре рабочих сайтов, 2.7.0 и 2.6.5 хостинг джино, всё работает.
Да, моя ошибка. Нечаянно скачал Mobile Detection. Не сменил репозиторий.
Странно, но у меня компонент не хочет работать.
Вставил на страницу:
Кто-нибудь сталкивался с подобным?
Вставил на страницу:
{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.» как на компьютере так и на мобилке. Пробовал в шаблоне, в чанке, во вложеном в чанк, чанке. Не хочет работать хоть ты тресни.Кто-нибудь сталкивался с подобным?
Подскажите, а компонент уже нельзя скачать? Не находит его
Скорее всего не в том репозитории смотрите. Переключите на modstore, всё доступно — MobileDetect
Всем привет. Подскажите пожалуйста, установлен последний MobileDetect и к сожалению не коректно работает вывод для планшета (tablet).
Почему то если зайти с Ipad или другого планшета, все равно показывает версию для Десктопа (standard)а точнее то что тут
[[!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`]]
На телефоне работает. В настройках стоит «Считать планшеты десктопом» — НЕТ.
Может потому что ?input ставите после условий проверки?
https://modstore.pro/packages/utilities/mobiledetect Брал вывод с доков. Телефон работает, а планшет нет
Здравствуйте!
Большое спасибо за плагин! До этого использовал Mobile Detection, но на php8.1 он почему то не заработал. Установил Ваш плагин — все заработало, даже переделывать ничего не пришлось.
Большое спасибо за плагин! До этого использовал Mobile Detection, но на php8.1 он почему то не заработал. Установил Ваш плагин — все заработало, даже переделывать ничего не пришлось.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.