0

私は完全に機能しているウェブサイトを作成します。

以前のレスポンシブ ウェブサイトのようにメディア クエリを配置しましたが、私のウェブサイトでは機能しません。

これは私のウェブサイトwww.itztotalsolutions.usです。レスポンシブにするためにメディアクエリを追加しようとしましたが、モバイルまたはiPadでメディアクエリの効果がありません..ここで、モバイルとiPadのWebサイトの外観に問題があると述べました..モバイルやiPad用のcssを書いているのではなく、デスクトップで見た通常のWebサイト...デバイスの解像度を検出しないことを意味します。

ここにコードがあります。ヘッダー内:

<meta name="viewport" content="width=device-width" />

style.css:

body, html { height: 100%;}
body {
    font-size: 12px;
    line-height: 18px;
    font-family: arial, sans-serif;
    width:100%;
    margin:auto;
    background:url(images/main-full-bg.jpg) repeat #F60;
    background-size:cover;
}

...etc.... all CSS for pages.. after it

/* ipad portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 980px) {
    body { min-width: 768px; }
    .shell { max-width: 748px; }
    #navigation ul li { padding-left: 24px; font-size: 15px; }
    .header-top { padding-left: 20px; padding-right: 20px; }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    body { min-width: 320px; }
    .shell { max-width: 320px; }
    .header .shell { padding:0; background: url(images/m-header-shell.jpg) no-repeat 0 0; }

    .header-top { padding: 0px 0 0px 0; }
    #logo { margin: 0 auto; float: none; display: block; }
}
@media only screen and ( max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {

    #logo a { background: url(images/logo@2x.png) no-repeat 0 0; -webkit-background-size: 142px 57px; -moz-background-size: 142px 57px; background-size: 142px 17px; }
    #navigation { background: url(images/navigation@2x.png) no-repeat 0 0; -webkit-background-size: 298px 32px; -moz-background-size: 298px 32px; background-size: 298px 32px; }
    #navigation a.nav-btn span { background: url(images/nav-arr@2x.png) no-repeat 0 0; -webkit-background-size: 10px 15px; -moz-background-size: 10px 15px; background-size: 10px 15px; }
    .pagination a { background: url(images/pagination@2x.png) no-repeat 0 1px; -webkit-background-size: 18px 40px; -moz-background-size: 18px 40px; background-size: 18px 40px; }
    .main section { background: url(images/section@2x.png) no-repeat center bottom; -webkit-background-size: 300px 10px; -moz-background-size: 300px 10px; background-size: 300px 10px; }
}

モバイルで実行すると、CSS がクエリ CSS からではなくデフォルト CSS から実行されているように見えることを確認しました。

これを解決するのを手伝ってください

4

1 に答える 1