css - メディア クエリが Iphone では機能しないが、ブラウザのサイズ変更では問題なく動作する

Question

こんにちは、私は現在、WordPress で Bones というボイラープレート テーマを使用していますが、Iphone でレスポンシブ メニューを機能させるのに問題があります。手動でサイズを変更すると、メニューが機能するようです

私が使用しているメディアクエリは

@media のみの画面と (最小幅: 960px) {

仕事に取り掛かろうとしているサイトはここにあります：リンク

私はテーマライターに行きましたが、彼は何日も応答していないので、どんな助けも大歓迎です

Answer 1

メタ ビューポート オブジェクトを使用しましたか? これを文書の頭に入れます

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Answer 2

You need to mention Media like this  for iphone and smartphones

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

Answer 3

これでスタイルシートをロードしたときに、次の問題に遭遇しました。

<link src="mobile.css" media="only screen and (min-width: 400px)" />

そして 内mobile.cssに、次のようなスタイルがいくつかありました。

@media screen and (min-width: 400px) {
    body {
        background: red;
    }
}

h1 {
    color: blue;
}

いくつかのデバイス (iPhone、iPad - もちろん別のブレークポイント、および Galaxy Nexus) はbackground:red;ルール (「ネストされた」メディア クエリ) を認識せず、「インライン」メディア クエリの外h1にあるデバイスのみ ( ) を認識しました。ただし、Chrome やその他のブラウザーでは問題ありませんでした。

Answer 4

これは奇妙に私に飛びつきました：

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
    ... 
}

私はそうあるべきだと信じています

@media only screen and (max-width: 480px), 
@media only screen and (max-device-width: 480px) { 
    ... 
}

また...

@media only screen and (max-width: 480px) and (max-device-width: 480px) { 
    ... 
}

doctype を XHTML から HTML5 に移行することも検討してください。