一般的なすべてのデバイスのCSS3メディアクエリのリストはどこにありますか？

Question

共通のデバイスサイズをすべて異なる方向（縦または横）でターゲットとするメディアクエリのリストを探しています。

また、メディアの幅（および高さ）を正しく識別するために、ズームレベルまたはビューポートのメタタグを設定する必要がありますか？私。ズームレベルは[min | max] - [width | height]に影響しますか？

Answer 1

かなり網羅的なリストhereがあるようです。

は、それは（iPhone 4のように）ラップトップ、デスクトップ、スマートフォン、および特定のデバイスのための異なるルール

Answer 2

メディアクエリの素敵なリストが含まれています。 http://nmsdvid.com/snippets/

Answer 3

すでに使用このリストを

/* Laptop/Tablet (1024px) */ 
@media only screen and (min-width: 481px) and (max-width: 1024px) 

and (orientation: landscape) { 
} 

/* Tablet Portrait (768px) */ 
@media only screen and (min-width: 321px) and (max-width: 1024px) 

and (orientation: portrait) { 
} 

/* Phone Landscape (480px) */ 
@media only screen and (min-width: 321px) and (max-width: 480px) 

and (orientation: landscape) { 
} 

/* Phone Portrait (320px) */ 
@media only screen and (max-width: 320px) { 
} 

Answer 4

いくつかの良い答えが、今iPhone 6と6 Plusのものを "標準" の寸法は適用されませんと：

/* iPhone 6 landscape */ 
@media only screen and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) 
{ } 

/* iPhone 6 portrait */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) 
{ } 

/* iPhone 6 Plus landscape */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 3) 
{ } 

/* iPhone 6 Plus portrait */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 3) 
{ } 

/* iPhone 6 and 6 Plus */ 
@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px) 
{ } 

/* Apple Watch */ 
@media 
    (max-device-width: 42mm) 
    and (min-device-width: 38mm) 
{ } 

Answer 5

このリストはあなたを助けます広く： -

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

/* 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 */ 
} 
/********** 
iPad 3 
**********/ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

/* iPhone 5 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6 ----------- */ 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6+ ----------- */ 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S3 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S4 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

/* Samsung Galaxy S5 ----------- */ 
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
}