Bulma css 框架列未在 Chrome 移动浏览器上堆叠

Question

我想弄清楚为什么我的小型静态网页在移动设备上无法正确显示（在 Chrome android 应用程序上注意到）。根据文档，列应自动堆叠在移动设备上。但是，当我查看它时，我看到页面的正常视图，宽度正确适合屏幕，但列保持在一行中。如下图所示。

我通过在桌面浏览器上调整页面大小来测试它是否是我的代码，并且页面按预期响应，将卡片堆叠在一个列中。这是在我的 phone 上模仿的桌面视图。

知道发生了什么事吗？我究竟做错了什么？这是代码

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

Answer 1

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

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

Bulma css 框架列未在 Chrome 移动浏览器上堆叠

Bulma css framework columns not stacking on Chrome mobile browser

html

css

responsive

bulma