HTML：在移動菜單欄很寬

我想創建一個使用materlizecss的移動菜單欄，但是當我在移動菜單欄中打開這個菜單欄非常寬。它正在佔用額外的空間。下面是HTML代碼，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>

但是，當我在瀏覽器中打開它看起來很不錯，當我調整瀏覽器窗口會相應地調整。但在移動設備上看起來非常糟糕。

來源

2016-04-21 Ajay Kumar

您是否將窗口大小調整爲與實際手機的寬度相同？ –

是@NikhileshKV –

嘗試將視口元標記添加到「頭部」部分。

來源

2016-04-21 15:24:35 Kirstyr

爲了讓這個答案更有用，您可以嘗試提供一些示例代碼並解釋您的解決方案爲何有所幫助。 –

謝謝:)這對我有效。 –

HTML：在移動菜單欄很寬

回答

相關問題