1

レスポンシブデザインのいくつかの要素をサイトに適用しようとしています。私の目標は、画面の幅に基づいて右側を非表示にすることです。デスクトップ（ウィンドウを最小化したとき）とiPhoneで動作を変更することができました。しかし、私のAndroidは、完全なデスクトップサイトと同じように右側を表示しています。

max-widthを750pxに設定しましたが、andriodに何かをさせようと試みるために、それを1000に増やしましたが、それでも運はありません。

私のCSSは元々次のように見えました：

#container {
width: 980px;
text-align: left; margin: 10px auto; font-family: Arial; font-size: 1em;
}
#rightnav {
float: right; align: center; width: 300px !important; margin: 0; padding: 12px 5px 5px 5px;
}

CSSに、次のメディアクエリを追加しました。

@media all and (max-width: 1000px) {
  #container {
    width: 95%;
    margin: 5px auto;
    padding: 5px;
  }
  #rightnav {
  display:none;}

完璧ではありませんが、最小化されたデスクトップ画面または私のiphone4では、右側が表示されず、レスポンシブデザインが機能していることを示しています。ただし、Androidでは、CSSがまったく応答していません。

いつものように、事前に感謝します...

4

1 に答える 1

-1

ビューポートタグを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
于 2012-12-20T23:21:36.403 に答える