Zurb Foundation Mobile 版本未在手机上显示答案

【问题标题】：Zurb Foundation Mobile version not showing on mobile phonesZurb Foundation Mobile 版本未在手机上显示
【发布时间】：2014-09-10 21:59:07
【问题描述】：

所以我有一个带有 Zurb Foundation 的网站，css 版本以及我的 Play 框架应用程序 (1.2.7)。 尚未添加任何 Play 代码。我有网站的基本布局，它可以在桌面上完美运行。我在桌面上调整了页面大小，并且可以看到移动版本的运行情况。都好。我在 Google App Engine 上部署了我的网站并从我的手机访问了该网站，但我没有看到移动版本，但如果我在桌面上调整浏览器的大小，则可以查看移动网站。我不知道为什么在我的手机（iPhone 5s、Safari 和 Windows 920、Internet Explorer）上无法查看移动网站版本

网址是http://thai-capital-lace.appspot.com

我的主页代码是

#{set title:'Home' /}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="@{'public/stylesheets/css/foundation.css'}" />
</head>
<body>
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">

      <h1><a href="@{MainController.homepage}"><img alt="" src="@{'public/images/logo.png'}" style="height:40px;width:40px;">  Thai Capital Lace</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="@{MainController.homepage}">Home</a></li>
      <li class=""><a href="@{MainController.products}">Products</a></li>
      <li class=""><a href="@{MainController.contact}">Contact Us</a></li>
    </ul>

    <!-- Left Nav Section -->
    <!-- <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
      <li><a href="#">Left Nav Button 2</a></li>
    </ul>
  </section> -->
</nav>

 <div class="row">
<div class="large-12 columns">



  <div class="hide-for-small">
    <div id="featured">
          <img src="http://placehold.it/1000x400&text=Slide Image" alt="slide image">

      </div>
    </div>

  <div class="row">
    <div class="small-12 show-for-small"><br>
      <img src="http://placehold.it/1000x600&text=For Small Screens"/>
    </div>
  </div>

  </div>
 </div><br>

 <div class="row">
   <div class="large-12 columns">
    <h5 class="panel">Our Best Sellers</h5>
    <div class="row">

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail"/>
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail"/>
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail"/>
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail"/>
      <h6 class="panel">Description</h6>
    </div>     
  </div>
</div>
</div>

 <div class="row">
 <div class="large-12 columns">
  <div class="row">

    <div class="large-8 columns">
      <div class="panel radius">

      <div class="row">
      <div class="large-6 small-6 columns">

        <h4>Header</h4><hr/>
        <h5 class="subheader">Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Donec dignissim nibh fermentum odio ornare sagittis.
        </h5>

      <div class="show-for-small" align="center">
        <a href="#" class="small radius button">Call To Action!</a><br>

        <a href="#" class="small radius button">Call To Action!</a>
      </div>

      </div>
      <div class="large-6 small-6 columns">

        <p>Suspendisse ultrices ornare tempor. Aenean eget ultricies libero. Phasellus non ipsum eros. Vivamus at dignissim massa. Aenean dolor libero, blandit quis interdum et, malesuada nec ligula. Nullam erat erat, eleifend sed pulvinar ac. Suspendisse ultrices ornare tempor. Aenean eget ultricies libero.
      </p>
    </div>

    </div>
    </div>
    </div>

      <div class="large-4 columns hide-for-small">

      <h4>Get In Touch!</h4><hr/>

      <a class="large button expand" href="#">
        Call To Action!
      </a>

      <a class="large button expand" href="#">
        Call To Action!
      </a>
    </div>
  </div>
  </div>
  </div>

  <footer class="row">
    <div class="large-12 columns">
    <hr>
      <div class="row">
        <div class="large-6 columns">
          <p>© Copyright Tune Studios.</p>
       </div>
      </div>
    </div>
  </footer>
  <script src="@{'public/javascripts/vendor/jquery.js'}"></script>
  <script src="@{'public/javascripts/foundation.min.js'}"></script>
  <script>
      $(document).foundation();
  </script>
</body>
</html>

【问题讨论】：

把这个添加到head标签<meta name="viewport" content="width=device-width, initial-scale=1.0">
这是一个简单的解决方案..很高兴我能提供帮助..将其作为答案发布。

标签： css responsive-design zurb-foundation

【解决方案1】：

将此添加到头部标签<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 属性控制视口的大小。它可以设置为特定数量的像素，例如 width=600px 或特殊值 device-width 值，即 100% 比例的 CSS 像素中的屏幕宽度。

在移动设备上，您可以使用捏合手势来放大和缩小页面，但如果您将视口设置为设备的宽度，则无需放大即可查看网页。为确保您的网页在最初显示时未放大，您可以使用属性initial-scale 设置默认缩放。

为确保用户在访问您的页面时不需要放大，请将其设置为 1

【讨论】：