Отзывчивое меню, не работающее на мобильном телефоне

Я очень новичок во всем этом отзывчивом проектировании в CSS. Я просто сделал рабочее отзывчивое меню, и он отлично работает на моем ПК, когда я делаю окно браузера меньше, но при загрузке сайта на моем телефоне он просто уменьшен и не отображает меню как отзывчивое.Отзывчивое меню, не работающее на мобильном телефоне

This is the site

Я понятия не имею, почему он делает это, кто? Я установил максимальную ширину в 900 пикселей, поэтому мое меню действительно ломается, если окно слишком короткое.

Это HTML для меню:

<ul class="topnav" id="myTopnav"> 
      <li><a href="#">Fonder</a></li> 
      <li><a href="#">Priser</a></li> 
      <li><a href="#">Produkter</a></li> 
      <li><a href="#">Frågor</a></li> 
      <li><a href="#">Juridik</a></li> 
      <li><a href="#">Om oss</a></li> 
      <li><a href="#" class="active">Hem</a></li> 
      <li class="icon"> 
       <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
      </li> 
     </ul>

И это JS:

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ 
    function myFunction() { 
     var x = document.getElementById("myTopnav"); 
     if (x.className === "topnav") { 
      x.className += " responsive"; 
     } else { 
      x.className = "topnav"; 
     } 
    }

И это ответная CSS:

@media screen and (max-width:900px) { 
    ul.topnav li {display:none;} 
    ul.topnav li.icon { 
     float: right; 
     display: inline-block; 
     opacity: 1; 
    } 
} 
@media screen and (max-width:900px) { 
    ul.topnav.responsive {position:relative;} 
    ul.topnav.responsive li.icon { 
     position: absolute; 
     right: 0; 
     top: 0; 
     background-color: none; 
     opacity: 1; 
    } 
    ul.topnav.responsive li { 
     float: none; 
     display: inline; 
     position: relative; 
     top: 32px; 
    } 
    ul.topnav.responsive li a { 
     display: block; 
     text-align: right; 
     /*background-color: red;*/ 
    } 
}

источник

2017-02-14 Jonathan Öhrström

Пожалуйста, покажите код (даже если это 3 линии), я предлагаю ответ. – AymDev

Почему вы используете одну и ту же 'max-width: 900px' в запросах' @ media' –

Вы пытались использовать bootstrap 3 –

Вы, вероятно, нужно добавьте <meta> в ваш <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Чтобы узнать, как правильно использовать этот <meta> (вы можете поместить больше значения атрибута content), вы можете прочитать это руководство:
Using the viewport meta tag to control layout on mobile browsers

источник

2017-02-14 09:50:15 AymDev

Это кажется интересным! Попробуй это –

@ Кондольент попробует, и примите мой ответ, если он решит вашу проблему :) – AymDev

Ну, это вроде сработало. Но это слишком сильно увеличилось на мобильных устройствах. Если вы попробуете, вы заметите, что текст шире, возможно ли изменить ширину, чтобы все это соответствовало? –

-1

Вы можете использовать загрузчик для чувствительных участков. Это очень легко реализовать. http://getbootstrap.com/getting-started/

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

Bootstrap Menus

источник

2017-02-14 09:58:45

Никогда не использовал бутстрап, не заглянет в него! Возможно ли использовать только отзывчивое меню из бутстрапа и как-то сделать остальные? Или это будет просто огромная работа? –

Если вы будете использовать бутстрап, вы не столкнетесь с этой проблемой. –

Рамка не является ответом, даже если Bootstrap выполняет эту работу. Это похоже на повторение Wordpress, когда кто-то хочет знать, как создать бэк-офис ... – AymDev

Отзывчивое меню, не работающее на мобильном телефоне

ответ

Смежные вопросы