html - 响应式导航栏的缩放问题

我尝试按照此 tutorial 为我的页面创建响应式导航栏.

调整浏览器大小后，我得到了正确的 View ，但是当我使用手机显示我的页面时，一切都非常小，如下图所示:

这是教程中的 css，只是做了一点改动:

body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #373a3c!important;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media (orientation: portrait) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media (orientation: portrait) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

HTML:

 <ul class="topnav" id="myTopnav">
  <li class="active" onmouseover="hover();" onmouseout="unhover();">
        <a href="./index.html"><img id="logo" src="./images/logo_white.png" /></a>
  </li>
  <li><a href="./index.html">Sensoren</a></li>
  <li><a href="./keyServers.html">Schl&uuml;sselserver</a></li>
  <li><a href="./trustSystem.html">Vertrauensgewichtung</a></li>
  <li><a href="./pluginManager.html">Plugin-Manager</a></li>
  <li><a href="./logEvents.html">Log-Events</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="enableBurgerMenu()">☰</a>
  </li>
</ul>

谁能告诉我如何在手机上也实现右侧的外观？

最佳答案

您需要将其添加到您的 <head> 中

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

这将确保您的宽度与屏幕尺寸相关。

关于html - 响应式导航栏的缩放问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40869817/

html - 响应式导航栏的缩放问题

上一篇：html - 缩小第二个 child 以始终适合 parent

下一篇：html - 当 Footable 在小型设备中时汇总列