Material Design Lite - nav header 在 Samsung S4 或 S4 上看起来很小

Question

在 Material Design Lite 中使用标准示例时，我发现 header 和标签栏看起来很小。怎么来的？如何解决这个问题？

这是代码：

<!doctype html>    
<html>
<head>
  <!-- Material Design Lite -->
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <style>
.content-grid {
  max-width: 480px;
}
</style>
</head>

<body>
  <!-- Always shows a header, even in smaller screens. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="demo-header mdl-layout__header mdl-layout__header--waterfall">
      <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">
                <div>MzFaster</div>
            </span>
        <div class="mdl-layout-spacer"></div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
          <label class="mdl-button mdl-js-button mdl-button--icon" for="search">
            <i class="material-icons">search</i>
          </label>
          <div class="mdl-textfield__expandable-holder">
            <input class="mdl-textfield__input" type="text" id="search" />
            <label class="mdl-textfield__label" for="search">Enter your query...</label>
          </div>
        </div>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
          <i class="material-icons">more_vert</i>
        </button>
        <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
          <li class="mdl-menu__item">About
            <a href=""></a>
          </li>
          <li class="mdl-menu__item"><a href="categories.php">Categories</a></li>
          <li class="mdl-menu__item"><a href="contactus.php">ContactUs</a></li>
          <li class="mdl-menu__item">
            <a href=""></a>Legal information</li>
        </ul>
      </div>
      <div class="mdl-layout__header-row">
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
          <a href="#S03" class="mdl-layout__tab is-active">Featured</a>
          <a href="#S04" class="mdl-layout__tab">Featured Music</a>
          <a href="#S05" class="mdl-layout__tab">Social</a>
          <a href="#S06" class="mdl-layout__tab">Trending</a>
        </div>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class="page-content">
        <!-- Your content goes here -->
      </div>
    </main>
  </div>
</body>

</html>

Answer 1

@Niet the Dark Absol——作为评论回答了问题。 @Niet，当您创建答案时（如上所述），我将删除此文本。功劳属于你！

下一行应该在 HTML 文件的 header 部分。

<meta name="viewport" content="width=device-width" />

Material Design Lite - nav header 在 Samsung S4 或 S4 上看起来很小

Material Design Lite - nav header looks very small on Samsumg S4 or S4

material-design-lite