Zurb Foundation手机版未显示在手机上

Question

Zurb Foundation手机版未显示在手机上

nup*_*pac 1 css responsive-design zurb-foundation

所以我有一个Zurb Foundation的网站,css版本以及我的Play框架应用程序(1.2.7).尚未添加播放代码.我有网站的基本布局,它在桌面上完美运行.我在桌面上调整页面大小,我可以看到移动版本的运行情况.都好.我在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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sud*_*eer 6

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

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

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

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

归档时间：	11 年，4 月前
查看次数：	758 次
最近记录：	11 年前