如何实现视口元标记以在jsfiddle上预览响应式网站

时间:2016-05-04 10:23:32

标签: html css twitter-bootstrap responsive-design jsfiddle

我试图在我的Android手机上预览这个JSFiddle(https://jsfiddle.net/petebere/11pkvt59/show/)代码。

出于某种原因,尽管实现了' CSS面板样式黑客攻击,但视口元标记仍无法正常工作。在这个SO问题中推荐的解决方案(Where do I put viewport meta tag in jsfiddle)。

你知道如何纠正这个问题吗?

JSFiddle HTML代码:

    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">Project name</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <p id='para'>
        Lorem ipsum dolor sit amet, cum ea modo dolor disputationi, te eum habeo movet conceptam. Essent moderatius eu has, ex has omnis deleniti. Mei eirmod argumentum et. Iusto labore te eum. Quis animal postulant quo id. Duo euismod dignissim in, nullam liberavisse theophrastus has te.
    </p>

JSFiddle CSS代码:

    p {
        margin-left: auto;
        margin-right: auto;
        max-width: 350px;
        font-size: 1.2em;
        color: #b1b1b1;
    }

    /* 'CSS panel style hack' to access the head element on JSFiddle */
    </style>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

0 个答案:

没有答案