1

iPhone用のPhoneGap/Cordovaプロジェクトを構築しています。

私は2つのcssファイルを持っています-1つは一般的なCSSルール用で、もう1つは次のようなiPad関連のcss用です。

    <!--Main Style Sheet-->    
    <link rel="stylesheet" href="css/styles.css" />
    <!-- iPad specific css-->
    <link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />

問題は、iPadのcssが通常のcssのように動作していることです。iPhoneとiPadの両方のシミュレーターを実行すると、そこに挿入したCSSが表示されます。

誰かが私を助けることができますか？

ありがとう！

4

3 に答える 3

1

iPadの場合、max-device-widthではなくmin -device-widthが必要です（つまり、iPadのポートレートモードでの最小幅は768pxです）

于 2012-06-14T23:04:30.963 に答える
1

max-device-widthは最小値ではなく最大値を与えるため、iPhoneを含む768ピクセル未満のすべてのデバイスに影響します。最小幅も指定すると修正されます。おそらく（min-device-width：481px）

于 2012-06-14T23:09:45.827 に答える
0

前述の解決策で一部の読者の問題が解決しない場合、この質問はレスポンシブWebデザインに直接関係します。

メディアクエリを含むスタイルシートを1つだけ使用することをお勧めします。

@media screen and (max-width:768px){
    /* Device Specific CSS rules here */
}

ここではmax-widthを選択しました。これを超えると、通常のCSSがレンダリングされるためです。次に、スマートフォンをターゲットにするために、最大幅が約500pxの別のメディアクエリを設定します。メディアクエリは、指定された通常のCSSルールをすべて自動的に継承し、メディアクエリ内で定義する必要があるルールはデバイス固有のスタイルのみであることに注意してください。

これはまったく同じことをします。ただし、これにはブラウザが1つのスタイルシートを解析するだけで済み、ロード時間が短縮されます（最小限ですが、それでも高速です）。

メディアクエリを使用する場合は、HTMLにビューポートメタタグも必要です。それ以外の場合、デバイスはデスクトップと同じCSSをレンダリングします。

また、CSS3メディアクエリは、ほとんどの最新のモバイルブラウザでサポートされています。

于 2012-06-15T04:45:29.117 に答える