Question

我正在尝试使用materlizecss创建一个移动菜单栏但是当我在移动菜单栏中打开它时非常宽。这需要额外的空间。这是HTML代码，

<head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic|Roboto:400,400italic,500,500italic,700,300italic,300|Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
<!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script>

$(document).ready(function(){

$(".dropdown-button").dropdown();
 $(".button-collapse").sideNav();

}); 


</script>

<head>
<body>




 <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a class="" href="/news/" target="">News</a></li>
  <li><a class="" href="/humor/" target="">Humor</a></li>
  <li><a class="" href="/bollywood/" target="">Bollywood</a></li>
  <li><a class="" href="/hollywood/" target="">Hollywood</a></li>
  <li><a class="" href="/sports/" target="">Sports</a></li>
  <li><a class="" href="/tech/" target="">Tech</a></li>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a class="" href="/news/" target="">News</a></li>
  <li><a class="" href="/humor/" target="">Humor</a></li>
  <li><a class="" href="/bollywood/" target="">Bollywood</a></li>
  <li><a class="" href="/hollywood/" target="">Hollywood</a></li>
  <li><a class="" href="/sports/" target="">Sports</a></li>
  <li><a class="" href="/tech/" target="">Tech</a></li>
      </ul>
    </div>
  </nav>
</body>

但是当我在浏览器中打开它时看起来很好，当我调整浏览器窗口大小时，它会相应调整。但在移动设备上，它看起来非常糟糕。

Answer 1

尝试将视口元标记添加到您的头部＆＃39;部分。

HTML：移动菜单栏很宽

1 个答案: