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

Question

我正在努力使主题移动响应。你可以在这里查看，http://107.170.168.111/

在桌面上查看并调整浏览器大小时，它工作正常。然而，在实际的移动设备上它似乎并没有正常工作（侧边栏应该被隐藏并且移动导航应该出现）。它适用于单个 post 视图，例如：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 -> https://gist.github.com/buschschwick/a7f67176e748c08e314a
Single.php -> https://gist.github.com/buschschwick/d3e2bdff07fffcb4b01a
Index.php -> 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。您需要在索引页中添加它。

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

Media Queries Ignored On Mobile Devices

html

css

mobile

wordpress-theming

更新：

已解决：