1

私は、多くの異なる携帯電話でモバイルサイトを表示できる場所にお金を払っているモバイルエミュレーターを使用しています. 彼らは iPhone で作業していますが、adnroid で何が起こっているのかはわかりません。これは私がAndroidメディアクエリに使用しているものです:

@media only screen and (max-device-width: 400px) {
- styles here -
}

@media only screen and (max-device-width: 600px)and (min-device-width:401px) {
- styles here -
}

スタイルシートにこれらのセクションがあり、dreamweaver を使用している場合、すべての異なる解像度がモバイル サイズで適切に表示されます。それから私は考えていました..ああ待って、Androidは自動的に画面を拡大して大きくしているので、これをインデックスの一番上に追加しました:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

私はそれらを追加しましたが、まだアンドロイドは何らかの理由でメディアクエリに注意を払っていません. 私が試したデバイスには480px X 800pxが含まれているため、そこで動作するはずですが、解像度が一致しないかのようにページをレンダリングしています....

誰にもアイデアはありますか？ドロイドのウェブページのデザインに関する情報が少ないことは知っています..しかし、そこに何人かの教祖がいるかもしれないと思っています....私は昨夜徹夜して、これに約8時間連続で取り組んでいました笑.

編集：さらに調べてみると、400px未満のものはすべて機能しているように見えますが、問題を引き起こしているのはデバイスの最大幅と最小幅が600から400の間です......

4

2 に答える 2

1

max-device-width：600pxを削除したところ、正しいものがレンダリングされています。何が起こったのかわかりませんが、それが答えです。

于 2012-09-09T22:33:52.347 に答える
0

最大値の前に最小値を並べ替えます。

@media only screen and (min-device-width: 401px) and (max-device-width:600px) {
- styles here -
}
于 2012-09-09T22:15:05.607 に答える