Вход • Регистрация

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

  •
  • 30 ноября 2015 г.
  • Добрый день! Интересует создание полупрозрачной кнопки ПОЗВОНИТЬ, которая будет всплывать ТОЛЬКО в случае захода на сайт с мобильных устройств (планшетов, смартфонов и т.д.). Слышал, что это как-то можно сделать чуть ли не исключительно в CSS, хотя, по логике, должен быть код "детектор мобильных". В общем, если кто-нибудь "в теме", может поделитесь рабочим решением, не рикошечащим на SEO? Заранее огромное спасибо!
    •
    • 01 декабря 2015 г.
    • Можно и так и так - 1 вариант через медиа запросы скрывать все и выдавать такую кнопку, второе решение включить мобильную версию и кнопку запихнуть в шаблон
      •
      • 01 декабря 2015 г.
      • Дело в том, что как раз хотел сделать решение попроще, БЕЗ подключения мобильной версии. Например, для адаптивной верстки - чтобы на десктопах обычный вывод, а при заходе с мобов внизу экрана всплывающий кнопарь ПОЗВОНИТЬ. Но гораздо больше это актуально для НЕадаптивной верстки...
        •
        • 01 декабря 2015 г.
        • Дмитрий, так никто адаптировать и не заставляет)) Медиазапросы отслеживают как размер экрана так и его положение, поэтому можете выводить только какой то определенный элемент при определенном разрешении экрана.
          • 01 декабря 2015 г.
          • С позволения дополню. В мобильных устройствах есть функция эмуляции запроса страницы для полной версии (т.е. не мобильной версии). Так вот я не встречал ни одно детектора, который с этим справился бы (каждый из них сообщал что угодно, но не то, что это мобильное устройство). Решение данной проблемы уникально просто - необходимо отследить разрешение экрана. Т.е. мобильное устройство эмулирует многое, но не разрешение.
            •
            • 01 декабря 2015 г.
            • Хм, спасибо за инфу, похоже, придется этот вопрос копнуть поглубже..
  •
  • 01 декабря 2015 г.
  • Попробуйте, так http://ruseller.com/lessons.php?id=1951&rub=37

    Так как в дивжке есть mobile_detector.php

    ну и не забываем про комментарии файлах

    Код
    /**
    * Mobile Detect Library
    * =====================
    *
    * Motto: "Every business should have a mobile detection script to detect mobile readers"
    *
    * Mobile_Detect is a lightweight PHP class for detecting mobile devices (including tablets).
    * It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.
    *
    * @author Current authors: Serban Ghita <serbanghita@gmail.com>
    * Nick Ilyin <nick.ilyin@gmail.com>
    *
    * Original author: Victor Stanciu <vic.stanciu@gmail.com>
    *
    * @license Code and contributions have 'MIT License'
    * More details: https://github.com/serbanghita/Mobile-Detect/blob/master/LICENSE.txt
    *
    * @link Homepage: http://mobiledetect.net
    * GitHub Repo: https://github.com/serbanghita/Mobile-Detect
    * Google Code: http://code.google.com/p/php-mobile-detect/
    * README: https://github.com/serbanghita/Mobile-Detect/blob/master/README.md
    * HOWTO: https://github.com/serbanghita/Mobile-Detect/wiki/Code-examples
    *
    * @version 2.8.12
    */
    •
    • 01 декабря 2015 г.
    • Александр, спасибо за подсказку!

      Я уже маленько не туда полез... Кстати, если кому нужно, есть тоже неплохой детектор: github.com/matthewhudson/device.js
      Раз уж у нас уже есть детектор (только у меня он называется сайт/plugins/mobile_detect.php ), не подскажете, что и где нужно прописать в шаблоне и CSS, чтобы при заходе ТОЛЬКО со смартфонов внизу экрана появлялась кнопка "Позвонить".

      Сразу скажу - я не кодер, но, насколько я понимаю, должно быть:

      1) подключение плагина, что-то типа <script src="/plugin/mobile_detect.php"></script>

      2) скрипт с условием вывода кнопки на мобайлах, что-то типа

      if (device.mobile()) {
      //показать кнопку такого-то класса с такой-то ссылкой
      } else {
      //ничего не показывать
      }

      3) должны быть прописаны стили кнопаря

      Можете подсказать, в правильном ли направлении я иду, а если возможно, заодно уточнить правильные варианты, а именно, как конкретно подключить имеющийся детектор мобил в шаблон и правильный скрипт с условием вывода кнопки (и куда его надо разместить - до </head> или до </body>)? Со стилями всё понятно, но если есть какие-то нюансы для вывода на смартфонах, тоже буду признателен за любые советы!

      Заранее огромное спасибо!

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум