移动/桌面媒体查询在手机上不起作用答案

【问题标题】：Mobile/Desktop media query not working on cell phone移动/桌面媒体查询在手机上不起作用
【发布时间】：2015-05-29 01:29:57
【问题描述】：

昨晚我致力于优化我的网站移动设备。当用户在小于 684px 的设备上时，它应该显示移动导航 div 并隐藏侧边栏 div。我已经在我的电脑上测试了这个（通过像手风琴一样缩小铬）。我还检查了https://www.google.com/webmasters/tools/mobile-friendly/?url=www.kisnardonline.com 以查看我的状态，但它说我的网站不适合移动设备（我意识到我的链接可能也是有效的/视口）。一旦我让它整体工作，我会让链接更加分散。感谢您的帮助！

这是我的代码(http://www.kisnardonline.com/wp-content/themes/mytheme/style.css)：

#wrapper { 
    display: block;
    min-width: 684px;
    max-width: 1200px;
    width: 98%; 
    margin: 0px auto; }

@media screen and (max-width: 684px) {
    #wrapper {
        min-width: 0px;  /* show under 684px - mobile */
    }
}

#content { 
    width: 74%;
    float: right; }

@media screen and (max-width: 684px) {
    #content {
        width: 100%;  /* show under 684px - mobile */
    }
}

#mobilenav {
    display: none; 
    margin: 15px auto;
    padding: 10px 10px 10px 10px;
    border-radius:20px;
    border:3px solid #a1a1a1;
    background:#1C2939; }

@media screen and (max-width: 684px) {
    #mobilenav {
        display: block;  /* show under 684px - mobile */
    }
}

#sidebar {
    display: block;
    width: 23%;
    min-width: 170px;
    max-width: 210px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    float: left; }

@media screen and (max-width: 684px) {
    #sidebar {
        display: none; } /* hide under 684px - mobile */
}

这是我的桌面（大于 684 像素的视图）：

这是我的桌面（小于 684 像素的视图）：

这是我的手机视图（三星 Galaxy S6）：

【问题讨论】：

尝试将此视口元标记添加到您的头部<meta name="viewport" content="width=device-width, initial-scale=1">
哇，太棒了，太生气了，我为此熬夜到凌晨 3:30，哈哈！太感谢了。你能把它作为一个答案，以便我将其标记为正确吗？另一件事是，当我在 android 上的 chrome 上“请求桌面版本”时，它不会显示侧边栏。有什么办法可以实现吗？

标签： html css media-queries

【解决方案1】：

对于响应式页面，您需要添加一个视口标签，告诉设备如何显示内容：

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

对于您的其他问题，“请求桌面站点”无法按照您设置的方式运行。如果您有 2 个单独的站点（一个用于移动站点，一个用于桌面），则该功能适用。例如，移动网站是 m.kisnardonline.com，并且文件与桌面网站不同。

【讨论】：

非常感谢您的帮助，非常感谢！