『スマホ・タブレット別にmedia queryのCSS一覧作ってやんよ!!!』

スポンサードリンク

レスポンシブデザインのサイトやスマホ機種の解像度によってCSSの指定を振り分けられるmedia queryですが、クライアントによっては

「Apple製品だけきっちり見えれば良い」とか「ウチの社長のAndroidの○○だからそれでキレイに見せてよ」などなど・・・

単純なスクリーンのサイズの指定だけでは済ませられないケースもあったりして・・・
なので主要機種用のmedia query指定のライブラリー一覧作ります。
お好みの指定をコピって下さい。

主要ディスプレイサイズ別

ディスプレイサイズ320px

@media screen and (max-width: 320px) {
    /*スタイル記述*/
} 

ディスプレイサイズ640px

@media screen and (max-width: 640px) {
    /*スタイル記述*/
} 

ディスプレイサイズ800px

@media screen and (max-width: 800px) {
    /*スタイル記述*/
} 

ディスプレイサイズ1024px

@media screen and (max-width: 1024px) {
    /*スタイル記述*/
} 

ディスプレイサイズ1028px

@media screen and (max-width: 1028px) {
     /*スタイル記述*/
} 

iPhone/iPad/iPad mini

iPhone（第１～２世代）

/*Landscape（画面横）*/
@media screen and (max-device-width: 480px) {
    /*スタイル記述*/
}
/*Portrait（画面縦）*/
@media screen and (max-device-width: 320px) {
    /*スタイル記述*/
}

iPhone 3G

@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){
    /*スタイル記述*/
} 

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    /*スタイル記述*/
}

iPhone 5 + iPhone 5S

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
    /*スタイル記述*/
}

iPhone 6

@media screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2){
    /*スタイル記述*/
}

iPhone 6 Plus

@media screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 2){
    /*スタイル記述*/
}

iPad（第１～３世代）

/*Landscape（画面横）*/
@media (max-device-width: 1024px) and (orientation: landscape) {
    /*スタイル記述*/
}
/*Portrait（画面縦）*/
@media (max-device-width: 768px) and (orientation: portrait) {
    /*スタイル記述*/
}

iPad（４世代）

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
    /*スタイル記述*/
} 

iPad mini

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
    /*スタイル記述*/
} 

Android製品（スマホタイプ）

Samsung Galaxy S2

@media screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {
    /*スタイル記述*/
} 

Samsung Galaxy S3

@media only screen and (-webkit-device-pixel-ratio: 2) {
    /*スタイル記述*/
} 

Android製品（タブレットタイプ）

Google Nexus 7

@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {
    /*スタイル記述*/
} 

Samsung GALAXY Tab 10.1

/*Landscape（画面横）*/
@media (max-device-width: 1280px) and (orientation: landscape) {
    /*スタイル記述*/
}
/*Portrait（画面縦）*/
@media (max-device-width: 800px) and (orientation: portrait) {
    /*スタイル記述*/
}

Kindle Fire HD

/*Landscape（画面横）*/
@media (max-device-width: 1280px) and (orientation: landscape) {
    /*スタイル記述*/
}
/*Portrait（画面縦）*/
@media (max-device-width: 800px) and (orientation: portrait) {
    /*スタイル記述*/
}

何か人気機種がふえたら追加していこうと思います。