Bulma css框架列未在Chrome移动浏览器上堆叠(Bulma css framework columns not stacking on Chrome mobile browser)

我想弄清楚为什么我的小静态网页在移动设备上观看时没有正常显示（在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>

I'm trying to figure out why my small static webpage isn't showing up properly when viewed on mobile (noticed on Chrome android app). According to the docs, the columns should automatically stack on mobile. But, when I view it I see a normal view of the page with the width fitting correctly to the screen, but the columns stay in one row. Shown in the below screenshot.

I tested to see if it's my code by resizing the page on a desktop browser and the page responded as expected, stacking the cards so in a single column. Here's a desktop-view imitated on my phone.

Any idea what's going on? What am I doing wrong? Here's the code

<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>