0

幅480pxの解像度のメディアクエリを作成したWebページがあります。

iphone 4はこのバージョンを正しく認識しますが、何らかの理由で、幅640pxのiphone 4の実際の解像度を使用せず、320pxの幅を使用してページに張り出します。（私は、iphone 3用に開発されたアプリとの下位互換性のためにこれを行うことをどこかで読みました）

ビューポートまたはメディアクエリを使用してこれを修正する方法はありますか？または、誰かがiphoneメディアクエリを実装する方法の例を持っていますか、iveは運がなくてこれを試しました。

iPhoneに合うように480pxのメディアクエリを拡張する方法はありますか？

これは私の現在のビューポートです：

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=5.0; minimum-scale=0.5;" />

-webkit-device-pixel-ratio: 2メディアクエリ-これは何もせず、iveはただだけで試しました

@media screen  and (max-width: 480px) and (-webkit-device-pixel-ratio: 2) {}
4

1 に答える 1

1

css3 のこのメディア クエリは、iPhone または iPod を検出する必要があります。

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2)

私が理解している方法は、Retina スクリーンは依然として通常の古いスクリーンであるかのように機能するということです。物事がまだ 320px の幅であるかのように振る舞います。縦向きで iPhone の全幅を占有するものが必要な場合は、640px ではなく 320px を使用します。実際には、正確な px サイズではなく、パーセンテージと ems を使用する必要があります。

これが何か答えたかどうかはわかりませんが、何かを640pxに設定すると、Retina画面の幅を占めるだけでなく、端からぶら下がってしまう理由を知りたいと思っていたと思います.

于 2012-10-03T23:54:21.130 に答える