个人中心
gpt4 book ai didi

css - Zurb Foundation 移动版未在手机上显示

转载 作者：行者123 更新时间：2023-12-02 07:28:34 25 4
gpt4 key购买 nike

所以我有一个带有 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>

最佳答案

在头标签中添加这个 <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

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

关于css - Zurb Foundation 移动版未在手机上显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24847439/

25 4 0
文章推荐： shell - Shell 脚本中的并发
文章推荐： java - Spring 依赖注入(inject)的 NullPointerException
文章推荐： java - 持久化类中的构造函数
文章推荐： sql - JPA 中的自定义连接条件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com