Question

我已经在stackoverflow上阅读了一堆主题来解决这个问题，并且还没有找到任何解决方法。

这就是我得到的：

我使用Bootstrap 3获得了一个webtemplate。包括以下META-Tag：

<td class="k-editable-area">
    <iframe class="k-content" frameborder="0" title="Editable area. Press F10 for toolbar." src="javascript:" "">
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <script>
                (function (d, c) { d[c]('header'), d[c]('article'), d[c]('nav'), d[c]('section'), d[c]('footer'); })(document, 'createElement');
            </script>
        </head>
        <body contenteditable="true" autocorrect="off">
            <br class="k-br">
        </body>
    </html>
</iframe>
<textarea id="Description" class="editor-field k-content k-raw-content k-valid" style="width: 660px; height: 140px; display: none;" rows="5" name="Description" cols="20" data-role="editor" autocomplete="off"></textarea>
<div class="k-resize-handle">
    <span class="k-icon k-resize-se"></span>
</div>
</td>

还包括以下CSS文件：

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

当我现在使用一些xs类的bootstrap时，一切似乎都能正常工作。我现在要做的是在特定框中添加填充，并仅在用户使用移动设备时更改徽标的高度。

这就是为什么我尝试了以下代码：

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/gamebooster.css">

如果我收缩浏览器窗口似乎工作正常，但是当我在我的手机上试用它时根本不起作用。关于这一点的好奇部分是：我使用完全相同的媒体查询作为bootstrap，它似乎工作。我做错了什么？

谢谢，费边

Answer 1

试试这个：

@media screen and (max-width: 767px) {
    -----

}

并且不要忘记使用以下元标记：

<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

Answer 2

just try to use

@media (max-width: 767px) {
  width:50px !important;;
  max-width:50px !important;
}

在第二个文件中，媒体查询无法在移动设备上运行

2 个答案: