7

タブレットのポートレートと電話のメディアクエリを実行する方法を知っています。しかし、タブレットの肖像画と電話のメディアクエリを1つだけ持つことは可能ですか?

/* tablets portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation : portrait) { 

}

/* phones */
@media screen and (max-device-width: 640px) { 

}

/* tablets portrait and phones 
Is it possible to have only one media query for this that do the same than the other media queries together?
*/
4

2 に答える 2

14

いいえ。

なんで?

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" />
于 2013-04-21T02:19:11.950 に答える
0

Detectizr ( https://github.com/barisaydinoglu/Detectizr ) を見てください。これは Modernizr ( http://modernizr.com/ ) 拡張機能です。

この JS は、CSS クラスを html タグに追加して、メディア クエリなしでデバイスをターゲットにできるようにします。.phone{} や .tablet{} など

于 2015-02-05T16:37:25.887 に答える