Question

我正致力于制作主题移动响应。您可以在此处查看http://107.170.168.111/

在桌面上查看并调整浏览器大小时，它可以正常工作。但是，在实际的移动设备上，它似乎没有正常工作（应该隐藏侧边栏并显示移动导航）。它适用于单个帖子视图，例如：http://107.170.168.111/2015/04/27/szechuan-green-beans/#more-9327

但不是实际索引。我似乎无法弄清楚 为什么 。

我的媒体查询当然是在我的CSS文档的末尾：

    @media screen and (max-width: 640px){
        .hide-for-small{
            display: none !important;
        }
        .show-for-small{
            display: block !important;
        }

        .sidebar-container{
        display: none !important;
        }
        #sidebar{
        display: none !important;
        }
        .wrapper{
        width: 100%;
        }
        #content{
        position: relative;
        display: block;
        margin: 0;
        width: 100%;
        padding: 110px 0 0;
        }
    }

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

我很难过，有什么建议吗？谢谢！

更新

meta viewport位于header.php中 - 它包含在index.php中，但由于某种原因未显示。在single.php上使用相同的代码。

Header.php - ＆gt; https://gist.github.com/buschschwick/a7f67176e748c08e314a
Single.php - ＆gt; https://gist.github.com/buschschwick/d3e2bdff07fffcb4b01a
Index.php - ＆gt; https://gist.github.com/buschschwick/56576b2294b160271a3a

解决：

禁用的缓存插件仍在提供不包含meta viewport的旧版index.php。感谢大家。

Answer 1

将@media从“screen”更改为“all”。您的目标是所有设备不仅仅是屏幕：

 @media all and (max-width: 640px){
 // your css
}

修改

当您查看源代码时，您无法找到“viewport”的任何meta标记。我使用你的代码并在我的编辑器中添加了视口，它运行得很好：

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

Answer 2

问题：索引页面没有meta viewport。您需要在索引页面中添加它。

移动设备上忽略的媒体查询

更新

解决：

2 个答案: