List of media queries on device displays by pixel density

Target device displays using media queries:

different devices

iPhone
320 x 480

iPhone 4
640 x 960

iPad 1 & 2
768 x 1024

iPad 3
1536 x 2048

Amazon Kindle Fire
1024 x 600

Media Queries – setting the max-device-width of any screen size. Here’s a few:

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
/* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape) {
/* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px) {
/* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
/* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
}

/*#### iPhone 6 plus phablet ####*/
@media screen and (min-device-width: 414px) {
/* some CSS here */
}

/*#### iPhone 6#### */
@media screen and (min-device-width: 375px) {
}

/*#### iPhone ####*/
@media screen and (max-device-width: 320px) {
}