布尔玛css框架列不堆叠在Chrome浏览器手机浏览器

我想弄清楚为什么我的小静态网页在移动设备上查看时没有正确显示（在Chrome浏览器的Android应用上发现）。根据文档，列应该自动堆叠在移动设备上。但是，当我查看它时，我看到正常的宽度适合屏幕的页面的正常视图，但列保持一行。显示在下面的截图中。布尔玛css框架列不堆叠在Chrome浏览器手机浏览器

我测试了一下，看看它是否是我的代码，通过在桌面浏览器上调整页面大小，页面按预期进行响应，在单个列中堆叠这些卡片。这是在我的手机上模仿的桌面视图。

任何想法是怎么回事？我究竟做错了什么？代码如下

<html> 
<head> 

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css"/> 

</head> 
<body style="background-color:#00aced;"> 

    <div class="container"> 
     <div class="notification" style="background-color:#fff"> 
      <strong>Remember:</strong> In order to continually receive updates, please install the GoodSamarit4n repository from 
      <a href="">here</a>. This is the <em>only</em> official source. The reason I am providing links to the add-on zips is for complete transparency and for those who would like to study and learn from the code. 
      <br> 
     </div> 
    </div> 

    <div style="padding: 20px;" class="container"> 

     <div class="columns"> 
      <div class="column"> 
       <div class="card"> 
        <div class="card-image"> 
         <figure class="image is-4by3"> 
          <img src="https://pugdaddy.000webhostapp.com/images/githubforkodi.png" alt="Image"> 
         </figure> 
        </div> 
        <header class="card-header"> 
         <p class="card-header-title"> 
          Githubforkodi 
         </p> 
        </header> 
        <div class="card-content"> 
         <div class="content"> 
          A kodi program add-on for managing your github account. View repos, branches, notifications, Open/Close/Comment on issues, Merge/Deny pull requests, Get real-time notifications, And much more! The power of github combined with the simplicity of kodi. 
          Creator <a href="https://twitter.com/good_samarit4n">@goodsamarit4n</a>. <a>#kodi</a> <a>#github</a> <a>#program</a> <a>#add-on</a> 
          <br> 
          <small>8:00 PM - 24 Jul 2017</small> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="card"> 
        <div class="card-image"> 
         <figure class="image is-4by3"> 
          <img src="https://pugdaddy.000webhostapp.com/images/pugdonut.png" alt="Image"> 
         </figure> 
        </div> 
        <header class="card-header"> 
         <p class="card-header-title"> 
          Squeee! 
         </p> 
        </header> 
        <div class="card-content"> 
         <div class="content"> 
          A kodi video add-on that provides cute, funny, and heartwarming animal videos from all over the internet. Skip the endless clicking around your favorite sites and let Squeee! bring all of those sites to you in an easy-to-digest fashion. Click through videos one at a time or play an entire playlist and just sit back and embrace the fluffy. 
          Creator <a href="https://twitter.com/good_samarit4n">@goodsamarit4n</a>. <a>#kodi</a> <a>#squeee</a> <a>#video</a> <a>#add-on</a> <a>#cute</a> <a>#animals</a> 
          <br> 
          <small>8:00 PM - 24 Jul 2017</small> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="card"> 
        <div class="card-image"> 
         <figure class="image is-4by3"> 
          <img src="https://pugdaddy.000webhostapp.com/images/illuminati.jpg" alt="Image"> 
         </figure> 
        </div> 
        <header class="card-header"> 
         <p class="card-header-title"> 
          Alternative Facts 
         </p> 
        </header> 
        <div class="card-content">  
         <div class="content"> 
          Get ready to get beligerantly angry or find yourself continually muttering "What the f###?" under your breath. For those who enjoy seeing just how crazy some folks are. With documentaries on conspiracy theories gathered from all over the web. If you don't see a topic, feel free to tweet at me and I'll see about adding it for you. 
          Creator <a href="https://twitter.com/good_samarit4n">@goodsamarit4n</a>. <a>#kodi</a> <a>#alternativefacts</a> <a>#video</a> <a>#add-on</a> <a>#conspiracy</a> <a>#theories</a> 
          <br> 
          <small>8:00 PM - 24 Jul 2017</small> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

来源

2017-07-25 CaffeinatedCoder

添加以下元标记可能会解决此问题。

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

来源

2017-07-26 20:57:25 ironcladgeek

哦，男人，我简直不敢相信那很简单。然而，我似乎无法找到它在文档中的位置（或者至少不是他们讨论列类的地方）。非常感谢！ – CaffeinatedCoder

这是控制移动设备布局的标准规则，我也从[bootstrap]（http://getbootstrap.com/getting-started/#template）世界中学到了它！你可以阅读更多关于它[这里]（https://www.w3schools.com/css/css_rwd_viewport.asp）和[那里]（https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag ）。 @CaffeinatedCoder – ironcladgeek

布尔玛css框架列不堆叠在Chrome浏览器手机浏览器

回答

相关问题