0

Web サイトを変更するために cssを追加@media screenしましたが、応答していないようです。HTML にメタを追加しましname = "viewport" content="width=1200, width=device-width"たが、携帯電話でのサイトの表示に影響を与えたのはこれだけでした。CSSに以下を追加しましたが、効果がありません。

@media screen
and (max-device-width: 768px)
and (orientation: portrait) {
   body {
   max-width: 600px;
}
   #sidebar {
     width: 0;
   }
}

@media screen
and (max-device-width: 1000px)
and (orientation: landscape) {
  body {
    max-width: 800px;
  }
    #sidebar {
        width: 0;
    }
}

では、どうすればよいですか：

  • これを機能させるには、CSS が間違っていますか?

  • css#sidebar内を具体的に取り除く方法はありますか?@media screen

4

6 に答える 6

1

これを試してください（テストされていません）

@media handheld and (orientation: landscape), 
  screen and (max-width: 1000px) {

 body {
    max-width: 800px;
  }

 #sidebar {
    width: 0;
 }

}
于 2013-03-07T03:53:17.100 に答える
0

展示部分はアキラ・ドーソンに感謝します。iPhoneで正しく表示するには、content ="width=1200"を削除する必要があるようです。さらに、私が最終的に行ったことは、@ media画面を削除し、iPhoneで有効にするために@mediaハンドヘルドに変更することでした。何らかの理由で@mediascreenは機能しません。@mediaハンドヘルドはiPhoneでは動作しないと言われたので興味深いですが、どうやら動作しているようです。

于 2013-03-09T05:50:57.747 に答える
0

古いバージョンの CSS ファイル (変更前) が携帯電話にキャッシュされている可能性があります。PHP を使用している場合、これを回避する良い方法は次のとおりです。

<link rel="stylesheet" href="styles.css?ver=<?php print filemtime('styles.css') ?>">

そうすれば、スタイルシートは必要なときにのみ再ダウンロードされます。

PHP をお持ちでない場合は?ver=、CSS ファイルを変更するたびにパラメータを手動で変更できます。

これはあなたの問題かもしれませんし、そうでないかもしれません、私にはわかりません。しかし、それは役立つかもしれません。

于 2013-03-07T03:53:31.903 に答える
0

私が理解している限りcontent="width=1200、あなたのサイトには少なくとも1200pxのビューポートが必要であると書かれていますが、これはmax-device-width: 768px

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />おそらくあなたの問題を解決するはずです。

ソース: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

于 2013-04-03T23:11:13.683 に答える
0

コードは私には問題ないようです。ハードリフレッシュを試みましたか？

私の経験では、設定が適用されていることに気付かない場合、shft + f5 で CSS が修正されます。また、キャッシュを削除することも役立ちます！

また、#サイドバーを取り除くために

#sidebar{
    display:none;
}

@media を押すと非表示になります。それが役立つことを願っています:)

于 2013-03-07T06:06:30.627 に答える