4

解決済み: トム: あなたは正しかった。残念ながら、WordPress 関数 wp_head() は、プラグインのために width=1100 を追加していました。ありがとう！

新しいレスポンシブ Web サイトに取り組んでいますが、@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;
    }
}
4

3 に答える 3

10

次のコードを head タグで使用できます。

<meta name="viewport" content="width=device-width, initial-scale=1"/>
于 2012-10-09T14:07:52.840 に答える
2

max-width: 1200pxもう一度調べてみると、iPhone 4S と iOS 6 で導入された Remote Web Inspector を使用すると、CSS ファイルにあるにもかかわらず、以下のスタイルが見つかりませんでした。これがなぜなのかわかりません。

また、私はレスポンシブ デザインとメディア クエリに関するブログ記事を数か月書きました。必要に応じて、ここで読むことができます。あなたがメディア クエリが苦手だと言っているわけではありません (とても素晴らしいサイトです!) あなたにとって興味深い読み物になることを願っています :)

編集:あなたのサイトをもう一度見ると、head(一番下の) に次のコードがあることに気付きました:

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

これが、画面幅が 1100px または 1200px 未満の場合にスタイルが適用されなかった理由である可能性があります。これを取り出して、もう一度試してください。

于 2012-10-09T15:51:04.807 に答える
-1

それはあなたのCSSを別々のファイルに入れることと関係があるかもしれません。原則として、すべてのCSSを常に1つのファイルに書き込む必要があります（style.css）。すべきではありませんが、わかりやすくするために、両方を同じファイルに入れて、何が起こるかを確認してください。それがうまくいかない場合は、これについてコメントしてください。もう一度見ていきます。

于 2012-10-09T15:09:33.063 に答える