在移动设备上忽略 XY 网格断点？

Question

我无法让 XY 网格中的列响应较小的 windows。在桌面上，它看起来不错，我调整了 window 列堆栈的大小，就像您在响应式设计中所期望的那样。出于某种原因，在移动设备上，它只是不断缩小和缩小。我认为这可能是其他模块的干扰，但我将我当前的项目减少到绝对基础，但它仍然如此。

这不正常，因为我看到 Foundation 模板的行为符合人们的预期。我是 Foundation 的新手，所以我希望我只是遗漏了一些非常简单的东西。

代码笔：https://codepen.io/anon/pen/jXOJLQ 如果您将桌面浏览器的大小调整为低于 640 像素宽度，它会按预期工作。但是，如果您使用移动设备 phone（或使用 Chrome 的移动视图），它只会按比例缩小，永远不会放弃两列布局。

$(document).foundation();

<head>
  <!-- Import Foundation, Foundation MotionUI and KaTeX Stylesheets -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css"
    integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA=="
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/motion-ui@1.2.3/dist/motion-ui.min.css" />

  <!-- Import jQuery, Foundation, KaTeX and KaTeX Auto-Render -->
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
    crossorigin="anonymous"></script>

</head>


<body>
  <article class='grid-container'>
    <div id='content' class="grid-x grid-margin-x">
      <div class="medium-6 cell">
        <div class='card'>
          <div class='card-divider'>
            Column 1
          </div>
          <div class='card-section' style='z-index:10;'>
            Hello world!
          </div>
        </div>
      </div>

      <div class="medium-6 cell">
        <div class="card">
          <div class='card-divider'>Column 2</div>
          <div class="card-section">
            Hello world!
          </div>
        </div>
      </div>
    </div>
  </article>
</body>

Answer 1

确保您没有在脑海中遗漏视口元标记。

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

在移动设备上忽略 XY 网格断点？

XY Grid Breakpoints Ignored on Mobile?

zurb-foundation

zurb-foundation-6