1

Phonegap (1.4.1) / JS (jQuery Mobile 1.0) / HTML / CSS を使用してモバイル アプリに取り組んでいます。メディア クエリを使用して、さまざまな画面サイズに適した CSS ファイルを読み込んでいるので、スタイル シートを読み込む次のコードがあります。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen and (min-width: 720px)" href="../css/XL_global.css" />
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 719px)" href="../css/L_global.css" />
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 479px)  " href="../css/M_global.css" />
<link rel="stylesheet" media="screen and (max-width: 319px) " href="../css/S_global.css" />

私の問題: 画面解像度が 960x640 ピクセルの iPhone 4S では、読み込まれるスタイルシートは M_global.css です。私は iOS 5.1 を使用していますが、私の知る限り、iOS の UIWebView は、少なくとも iOS 5 以降ではメディア クエリをサポートしています (結局のところ、スタイルシートの 1 つをロードします)。

min-device-width/max-device-width と -webkit-min-device-width/-webkit-max-device-width も使用してみましたが、違いがあるかどうかを確認しましたが、違いはありませんでした. 上記のさまざまな組み合わせの先頭に「のみ」という単語を追加しようとしました（つまり、メディア="画面のみと（最小幅：480px）および（最大幅：719px）"）が、そうではありませんでした。どちらも役に立ちません（実際に驚くことではありません）。

M_global.css ファイルのクエリ条件を min-width:0 および max-width:0 に設定して、その特定のスタイルシートが読み込まれているかどうかを確認しようとしましたが、CSS は読み込まれませんでした。

これが私が自分のためだけに作っていたアプリだったら、私はそのままにしておいて、間違った CSS ファイルをロードしたことを受け入れて、それを最大限に活用します。ただし、これは私のためではありません。また、このアプリを維持するのは私ではないため、適切である必要があります。

iOS でこのような風変わりな動作をした経験があり、回避策を見つけた人はいますか?

4

2 に答える 2

1

次のようにスケールをテストする必要があります。

media="-webkit-min-device-pixel-ratio: 2"
于 2012-05-07T15:37:24.230 に答える
0

携帯電話の実際のピクセル寸法が何であれ、CSS が「CSS Device Pixels」を見ていることを認識する必要があります。これはまったく異なります。

スタイルシートは、iPhone が 320x480 であることをまだ登録しています。ピクセル密度は高くなりますが、「CSS ピクセル」を考慮する必要があります。

高解像度のデバイスでさえ、CSS ピクセルの値が低く報告されています。ググってください。

于 2014-10-01T21:43:24.070 に答える