1

私は現在、スマートフォンをターゲットにするメディアクエリに悩まされています。メディアクエリを使用するのは初めてです。

タブレット版（768px）のウェブサイトと電話版（320px）を作成しました。

タブレット版、Firefoxのスクリーンショット

スマートフォン版、Firefoxスクリーンショット

これらのスクリーンショットは実際にはFirefoxのスクリーンショットであることに注意してください。ご覧のとおり、Firefox、IE、Webkitでウィンドウのサイズを変更すると、これらの表示は正常に機能します。

ただし、iPhone3GとXperiaX8の表示が間違っています。

結果は次のとおりです（左のiPhone、右のXperia）：

ここに画像の説明を入力してください

私の知る限り、両方の電話の解像度は480*320ピクセルです。では、なぜそのような結果になるのでしょうか。

iPhoneの画面では、ヘッダーの薄茶色の長方形は300px幅であると想定されています。なんでこんなに小さいの？

そして、なぜタブレット版がXperiaにロードされているのですか？

私はCSSでこれらのメディアクエリを使用しています：

/*タブレット-----------*/

@media  (min-width: 768px) and (max-width:1023px)

/*電話*/

@media (min-device-width: 320px) and (max-device-width:767px),
        (min-width: 320px) and (max-width:767px)

あなたが私を助けてくれることを願っています、私はあまりにも多くの日以来この問題に固執しています。

4

2 に答える 2

1

適切なビューポートを設定しましたか？好き：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0" />

それをあなたの頭のタグに入れてください。

于 2012-11-02T18:27:27.143 に答える
0

適切なメディアクエリを使用して、スマートフォンやクロスプラットフォームに最適なレンダリングと応答性を確保します。ここに、メディアクエリを正しい方法で使用する方法を学ぶことができるリンクがあります。cssトリック

于 2017-05-04T04:31:40.103 に答える