1

「レスポンシブ」なWebサイトを作成しようとしています。ブラウザのサイズを教えてくれる「resizemybrowser.com」というツールを見つけました。この情報を CSS 内のメディア クエリに使用しています。

興味深いのは、この Web サイトに移動するときに、デバイスを縦向きから横向きに回転させてもブラウザーの幅が変わらないことです。高さプロパティには異なる値が表示されますが、幅は常に 980px であり、その理由がわかりません。

ありがとうございました。

編集1：

また、Web ツール「resizemybrowser.com」の「outer」設定をいじってみました。現在、横向きモードとは対照的に、縦向きモードでは異なるサイズが表示されます。私のgalaxy s3では、縦向きの場合は720、横向きの場合は1280pxが返されます。ただし、これらの値を使用してメディア クエリをテストすると、横向きと縦向きの両方で 720px のメディア クエリが引き続き取得されます。CSSは次のとおりです。

    @media only screen and (max-width: 720px) {        
.hero-unit {
  background: url("../img/1.jpg") 100% 100% no-repeat;
background-size: contain;
width: 20em;
height: 10em;
padding:0px;
    }

  @media only screen and (min-width:721px) and (max-width: 1280px) {        
.hero-unit {
    background: url("../img/2.jpg") 100% 100% no-repeat;
background-size: contain;
width: 26em;
height: 10em;
padding:0px;
    }

      h2 {
  font-size: 1.8em;
  line-height: 1em;
}

}

編集2

コードに次の行を追加しようとしましたが、違いはありませんでした。

    <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />'
4

1 に答える 1

0

追加する必要があると思います

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

このタグがある場合とない場合の結果を比較してください。セクションメディア クエリを参照してください。私のデバイスでは、思い通りに動作します。

于 2012-11-09T19:20:33.130 に答える