Точки останова сетки XY игнорируются на мобильном? - PullRequest
Новая
       7

Точки останова сетки XY игнорируются на мобильном?

0 голосов
/ 10 декабря 2018

У меня проблемы с тем, чтобы мои столбцы в сетке XY реагировали на окна меньшего размера.На рабочем столе это выглядит нормально, я изменяю размеры окна, как и в адаптивном дизайне.По какой-то причине на мобильных устройствах она просто продолжает уменьшаться и уменьшаться.Я подумал, что это может быть каким-то другим модулем, создающим помехи, но я сократил свой текущий проект до абсолютной основы, и он все еще ведет себя таким образом.

Это не может быть нормально, так как я вижу шаблоны Foundation, ведущие себя какожидать.Я новичок в Foundation, поэтому я надеюсь, что мне просто не хватает чего-то невероятно простого.

Codepen: https://codepen.io/anon/pen/jXOJLQ Если вы измените размер браузера настольного компьютера до ширины ниже 640 пикселей, он будет работать, как и ожидалось.Но если вы используете мобильный телефон (или пользуетесь мобильным представлением 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>

1 Ответ

0 голосов
/ 10 декабря 2018

Убедитесь, что в вашей голове не пропущен метатег viewport. 

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