2

Huawei Ascend Y330/Android 4.2 で 6 つの異なるブラウザーを使用してメディア クエリをテストし、mqtest.io によって報告された 3 つの異なるデバイス幅の結果を得ました。

次に、ブラウザごとに、次のような css を使用して自分の html ページで実際のブレークポイントをテストし、 @media only screen and (max-device-width: 320px)フォーマットの変更が表示されるまでピクセル値を変更しました。6 つのケースすべてのデバイス幅は、デバイスの mqtest.io によって報告されたものと一致します。

明らかに問題は、ブラウザーの不一致により、デザインを制御できないことです。これは »ローカル» 問題ですか、それとも を使用する場合の一般的な問題@mediaですか?

mqtest.io および Web ページ テストによる結果

Dolphin および Android のデフォルト ブラウザ
device-width: 480px
device-height: 800px

Opera と Google Chrome
デバイスの幅: 320px
デバイスの高さ: 534px

Firefox および Firefox ベータ版
device-width: 320px
device-height: 533px

画面: 480x800
ピクセル比: 1.5 (6 つのブラウザーすべてについて mqtest.io で報告)

4

2 に答える 2

0

テストページにそのコードがありましたが、役に立ちません。また、さらにいくつかのテストを実行したところ、デバイス幅が単純に予測できないことが明らかになりました。ご回答ありがとうございます。

于 2015-08-10T02:48:37.773 に答える
0

次のコードは問題を解決しますか?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
于 2015-08-09T12:05:03.700 に答える