いいえ。
なんで?
iPad と iPhone は、画面サイズ、解像度、およびピクセル密度が異なる (異なるバージョン/リリースに基づく -ここを参照) 異なるデバイスです。
Device Screen(res) CSS pixel ratio
iPad (generation 1,2) 1024 × 768 1
iPad (generation 3,4) 2048 × 1536 2
iPhone (gen 1,3G,3GS) 480 × 320 1
iPhone (gen 4,4S) 960 × 640 2
iPhone (gen 5) 1136 x 640 2
iPad はタブレットに分類され、iPhone はモバイルに分類されるため、1 つのメディア クエリを使用して両方を完全に満たすことも、両方のデバイスに理想的なエクスペリエンスを作成することもできません。
私に何ができる?
1 つの解決策は、かなり一般的なアプローチを提供し、3 レベルのデバイス タイプおよび/または画面の幅/向きのメディア クエリを提供することです。
根底にある理論は、サイトまたはアプリをできるだけ多くのデバイスで使用/表示できるようにする必要があるということです。そのため、多数の個々のデバイスやメーカーを見逃すのではなく、アプローチを標準化してください。
大まかな例は次のとおりです。
@media screen and (max-width:500px) {
/* Mobile styles */
}
@media screen and (min-width:501px) and (max-width:999px) {
/* Tablet styles */
}
@media screen and (min-width:1000px) {
/* Desktop styles */
}
しかし、3 つのタイプの間の最適なブレークポイントに関しては見解が大きく異なり、そのようなブレークポイントに関する調査やデータが開発者コミュニティに広く歓迎されることはわかっています。
特に iOS デバイスをターゲットにしたい場合はどうすればよいですか?
あなたはこれを行うことができます。特定の iOS デバイスの特定の要件を満たすメディア クエリを提案する人が何人かいます (テストはしていませんが、以下にリストするリンクと共に頻繁に見てきました)。
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
その他の iOS 固有の取り組み:
一般的な参照:
警告
上記の方法の例を 1 つ使用しましたが、メディア クエリはさまざまな方法で適用できます。
@media screen and (max-width:500px) { ... }
@import url(mobile.css) (max-width:500px);
<link rel="stylesheet" type="text/css" media="screen and (max-width: 500px)" href="mobile.css" />