Блог

Главная - Вопросы по программированию - Как отобразить ссылку выпадающего меню только в мобильном браузере, а не в настольных браузерах

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

#javascript #html #css #drop-down-menu #mobile-browser

#javascript #HTML #css #выпадающее меню #мобильный браузер

Вопрос:

   <li class="megamenu-content">
    <div class="megamenu-content-wrapper clearfix">
      <ul class="col-lg-3  col-sm-3 col-md-3 ">
          <li class="cat-header">SHOW MEMBERS</li>
          <li><a class='dropdown-menu-link' href='/new-members/'>New Members</a></li>
          <li><a class='dropdown-menu-link' href='/old-members/'>Old Members</a></li>
          <li><a class='mobile-only' href='/main-page/'>Back to Page</a></li>         
       </ul>

    <script type="text/javascript">
          var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? true : false;
           if(isMobile) {
            document.getElementById('mobile-only').innerHtml = "Back to page"
           }
        </script>

Я пытаюсь показать содержимое в выпадающем меню только в мобильном браузере, но это не работает. Если у вас есть какие-либо другие идеи, мы также приветствуем вас 🙂
Спасибо.

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

1. Там нет элемента с mobile-only идентификатором

2. mobile-only это класс, а не идентификатор. Попробуйте getElementsByClassName("mobile-only")[0] или добавьте mobile-only идентификатор к этому <a /> элементу.

3. Как насчет моего 27-дюймового планшета? Должен ли я видеть эту ссылку на таком большом планшете? Какова реальная причина показывать эту ссылку только в мобильных браузерах?

4. Извините, это была моя ошибка, я изменил getElementsByClassName («только для мобильных устройств») [0], и это тоже не работает. Я думаю, что мой подход не работает должным образом. Некоторые источники показывают использование @media css…

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

Ответ №1:

установите для вашего класса только для мобильных устройств значение display:none

затем используйте медиа-запрос, чтобы указать ширину браузера вашего устройства

 @media screen and (max-width: mobile-width-here) {
    .mobile-only { display: block; }
}