他の人のCSSを編集しています。彼らは、iPad 用に 2 つのメディア クエリ (1 つは縦向き、もう 1 つは横向き) を使用しており、一部の大型の Android フォンやファブレットで問題を引き起こしているようです。
私が非常に奇妙だと思うのは、彼らが使用した CSS が、Android デバイスでは非常に脆弱であるにも関わらず、ほぼすべての人に推奨されていることです。
このクエリは、min-device-width と max-device-width の組み合わせを使用して、デバイスが iPad であることを確認します。'orientation' パラメーターを使用して、デバイスが縦向きか横向きかを判断します (iOS デバイスでは、デバイスが現在横向きであっても、デバイス幅は常に縦向きモードの幅です)。
これは、問題を引き起こしていると思われる CSS です。
/* iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS */
}
/* iPad Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* CSS */
}
ここでの問題は、デバイスの最小幅と最大幅を定義すると、これらのスタイルを他のデバイスにも適用する余地が多く残ることです。幅が 768px から 1024px の間のものはすべて iPad として扱われます。
私の場合、スタイルは、画面の下部にあるカスタム ボタン バーの幅が正確に 768 ピクセルになるように指定しています。そして、そのようないくつかのより多くのもの。これは iPad では機能しますが、幅が似ているが異なるデバイスでは機能しません。関連する Android デバイスの画面からボタンが落ちています。
だから私が今使っているのは：
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : landscape) { etc }
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : portrait) { etc }
これは、まさにすべての iPad をターゲットにしているようです。解像度が高くても、すべての iPad の「デバイス幅」は 768 ピクセルであることを理解しました。
だから私はそれを正しくやっていると確信しています。しかし、これはかなり一般的な問題であり、他の誰もが MIN-device-width と MIN-device-height を使用するように言っているので、他の誰かがこれについて聞いてくれることを本当に嬉しく思います.