2012-04-14 14 views
0

CSSを読み込んでいないか、スタイルを正しく表示していないメディアクエリに問題があります。CSSメディアがIPhone 4で正しく読み込まれない質問

私のしたことは、自分のiPhone用にstyle480.cssを作成し、通常のためにstyle.cssを作成することでした。

それがうまくいくように、私は自分のサイト全体

<meta name="viewport" content="width=device-width, initial-scale=1"/> 

をロードしました。

メインサイトのCSSにスタイル480を設定して、iphone用にスタイルを設定することができました。私のiPhoneではすべてが素晴らしいように見えますが、もちろんデスクトップ上の退屈なリストに過ぎませんでした。私は私のstyle480が終わってしまった後

は、私はコピー/私のスタイルのCSSで

@media only screen and (max-width: 480px) { 
{ 
    body {width:100%;} 
} 

にCSSを貼り付けます。

かなり標準的です。それは私のiPhone

トップナビゲーションメニューに正しく書式設定されていませんが、彼らはすべきではないとき

は、リストの数が浮かべられている左にプッシュなっている(私はHTML 5 <nav>を使用しました)。

これは、iphoneがメディアクエリの内側と外側の要素をミキシングするようなものです。それは、CSSを混合されたよう

一番下にそれを置く私も上のメディアクエリを入れて試してみました

、およびロード

-webkit-min-device-pixel-ratio : 1. 

同じこと、それがあります。

私はHTML上でCSSファイルを別々にロードしようとしました。まったく同じことです。

iphoneのCSSを正しく読み込むための唯一の方法は、ページのメインCSSとして設定する場合です。私は2セットのCSSを読み込んでいますが、それはiPhoneでは機能しません(しかし、それは私のラップトップで動作します)

iphoneからCSSを表示する方法を見つけることができますなぜなら、CSSが正しくロードされていない理由がわからなくなってしまうからです。

答えて

0

これは、iphoneがメディアクエリの内側と外側の要素をミキシングするようなものです。

これはうまくいきます。 の中にのメディアクエリが直接オーバーライドしない限り、メディアクエリの外のものが使用されます。すべてのコードをメディアクエリに入れず、その解像度に合わせて調整したいものだけをコピーしてください。

メディアクエリは、メインのCSSファイルを置き換えるものではなく、補足します。

関連する問題