Question

解答：汤姆：你是对的。不幸的是，由于插件，WordPress函数wp_head（）正在添加width = 1100。谢谢！

我正在开发一个新的响应式网站，但似乎无法让@media查询正常工作。它在我的桌面上调整浏览器窗口大小时确实有效，但它不能在我的ipad，iphone或Android手机上运行。

我做错了什么？！

此处链接：http://demo.mindspins.com/atmnieuw/ 这是CSS的链接：http://demo.mindspins.com/atmnieuw/wp-content/themes/atm/css/dynamic.php

提前致谢！

根据要求提供CSS代码：

@media all and (max-width: 1460px) {
    .site-width{ width: 1199px; }
    .main-width{ width: 719px; }
}
@media all and (max-width: 1220px) {
    .site-width{ width: 959px; }
    .main-width{ width: 479px; }
    #page-title h1.thetitle{
        font-size: 20px;
        line-height: 24px;
    }
    .sidebar .widget a.form-button-link, .sidebar .widget span.form-button-link{
        font-size: 20px;
        line-height: 24px;
    }
}
@media all and (max-width: 980px) {
    .site-width{ width: 719px; }
    .main-width{ width: 479px; }
    .right-width{ display: none; }
    #header-right{ display: none; }
    .widgets-wrapper-1{ display: block; }
    .widgets-wrapper-3{ display: block; position: relative; padding: 20px 0 0 20px; }
}
@media all and (max-width: 740px) {
    .site-width{ width: 95%; margin: 0 auto;}
    #header-wrapper{ width: 100%; }
    #header-left{ display: none; }
    #header-mid{ height: 80px; }
    #atmlogo a.atm {
        z-index: 100;
        top: 24px;
        left: 0;
    }
    .main-width{ width: 100%; }
    .left-width{ width: 100%; }
    .sidebar-left{ display: none; }
    .site-bg{ display: none; }
    #header-left span.header-contact{ height: 80px; width: 100%;}
    #main-nav{ height:auto !important; }
    #mobile-nav{
        margin: -4px 0 1px 0;
        display: block;
        position: relative;
        width: 100%;
    }
    #mobile-nav .nav-wrapper{
        display: block;
        color:  #fff;
        background: #cc0033;
        margin: 1px 0;
        height: 40px;
        padding: 0 10px;
    }
    #mobile-nav .nav-wrapper select.atm-dropdown{
        font-size: 12px;
        display: block;
        height: 40px;
        width: 100%;
        color:  #fff;
        background: #cc0033;
        border: 0;
        clear: both;
        -webkit-border-radius: 0;
        -webkit-appearance: none;
    }
    #mobile-nav .theme-s{
        width: 100%;
        background: #cc0033;
        color:  #fff;
    }

    #mobile-nav input.s{
        background: #cc0033;
        color:  #fff;
    }

    #mobile-nav input.searchsubmit{
        border-left: solid 1px #dcdcdc;
        color:  #fff;
        background: #cc0033;
        background-image: url(../images/icon_search.png);
        background-repeat: no-repeat;
        background-position: right top;
        -webkit-border-radius: 0;
        -webkit-appearance: none;
    }

    #primary{ display: none; }
    #main-content-header{
        height:auto !important;
        margin: 0 0 1px 0;
    }
    #main-content-header span.header-image{
        display: block;
        float: left;
        width: 25%;
        height:auto !important;
        margin: 0;
    }
    #main-content-header span.header-image img{
        line-height: 0px;
        margin: 0;
        padding: 0;
    }

    #page-title{
        height: 79px;
    }
}
@media all and (max-width: 500px) {
    body {
        font-size: 12px;
        line-height: 20px;
    }
        #footer-nav{ display: none; }
        #copyrights{ display: none; }
        .entry-content-bg{ padding: 20px; }
        #page-title .title-wrapper{ padding: 0 20px }
        #page-title h1.thetitle{
        font-size: 16px;
        line-height: 20px;
    }
}

Answer 1

您可以在head标记中使用此代码：

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

Answer 2

再看一下，当使用我的iPhone 4S和iOS 6中引入的远程Web Inspector时，我找不到任何低于max-width: 1200px的样式，即使它们在CSS文件中。我不知道为什么会这样。

此外，我写了一篇关于自适应设计和媒体查询的博客文章几个月，如果您愿意，可以read it here。不是说你不擅长媒体查询（这是一个非常好的网站！）只是希望它对你来说是一个有趣的读物：）

编辑：再次查看您的网站，我注意到head（位于底部）您有以下代码：

meta name="viewport" content="width=1100"

这可能就是为什么样式不适用于屏幕宽度低于1100px或1200px的任何东西。拿出来再试一次。

Answer 3

这可能与将CSS放在单独的文件中有关。作为一般规则，您应始终将所有CSS写入一个文件（style.css）。它不应该只是为了清楚地将它们放在同一个文件中，看看会发生什么。如果它不起作用，我会再看看。

@media适用于浏览器窗口调整大小，但不适用于手机

3 个答案: