When buying products or services on our site, we often receive affiliate commissions that support our efforts. Learn More

CSS Media Queries for Mobile and Tablet Devices

Media Queries for Mobile and Tablet

Making your website responsive is as important as ever with everyone browsing the web on mobile devices.  But with so many phones and tablets always changing screen sizes, it can get a little hectic.

So here is a cheat sheet of media queries for all popular devices that can come in especially handy when you need to target a specific viewport.

RESPONSIVE CSS MEDIA QUERIES FOR ALL DEVICES

 

Portrait and Landscape Media Query

Note:  All media queries below are for both portrait and landscape viewing mode.  However, if you need to target a specific orientation, you just need to add one line of code to any media query.

  • Portrait: and (orientation: portrait)
  • Example:

  • @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 812px)
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: portrait) {
      /* CSS Rules Here */
    }
  • Landscape: and (orientation: landscape)
  • Example:

  • @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 812px)
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: landscape) {
      /* CSS Rules Here */
    }

 

 

 

MEDIA QUERIES FOR MOBILE

Here is a list of media queries for mobile devices from Apple iPhone, Samsung Galaxy, OnePlus, to LG phones.  Because these media queries are targeting specific devices rather than the browser, device-width were used instead of width.

A simple method to calculate the screen resolution of each device is to multiple the pixel-ratio by the min width and max width values.

 

APPLE iPHONE MEDIA QUERY

iPhone X, XS, 11 Pro


@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
  /* CSS Rules Here */
}

iPhone XS Max, 11 Pro Max


@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 896px)
  and (-webkit-min-device-pixel-ratio: 3) {
  /* CSS Rules Here */
}

iPhone XR, 11


@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 896px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS Rules Here */
}

iPhone 6, 6S, 7, 8


@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS Rules Here */
}

iPhone 6 Plus, 6S Plus, 7 Plus, 8 Plus


@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
  /* CSS Rules Here */
}

iPhone 5, 5C, 5S, SE


@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS Rules Here */
}

 

 

SAMSUNG GALAXY MEDIA QUERY

Galaxy S8, S8+, S9, S9+, S10, S10+


@media only screen
  and (min-device-width: 360px)
  and (max-device-width: 740px)
  and (-webkit-min-device-pixel-ratio: 4) {
  /* CSS Rules Here */
}

Galaxy S6, S7, S7 Edge


@media only screen
  and (min-device-width: 360px)
  and (max-device-width: 640px)
  and (-webkit-min-device-pixel-ratio: 4) {
  /* CSS Rules Here */
}

Galaxy S4, S5, Note 3


@media only screen
  and (min-device-width: 360px)
  and (max-device-width: 640px)
  and (-webkit-min-device-pixel-ratio: 3) {
  /* CSS Rules Here */
}

Galaxy Note 10, 10+


@media only screen
  and (min-device-width: 360px)
  and (max-device-width: 718px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS Rules Here */
}

Galaxy Note 8, 9


@media only screen
  and (min-device-width: 360px)
  and (max-device-width: 740px)
  and (-webkit-min-device-pixel-ratio: 4) {
  /* CSS Rules Here */
}

 

 

GOOGLE PIXEL MEDIA QUERY

Pixel 4


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 870px)
  and (-webkit-min-device-pixel-ratio: 2.6) {
  /* CSS Rules Here */
}

Pixel 4 XL


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 870px)
  and (-webkit-min-device-pixel-ratio: 3.5) {
  /* CSS Rules Here */
}

Pixel 3a


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 847px)
  and (-webkit-min-device-pixel-ratio: 2.6) {
  /* CSS Rules Here */
}

Pixel 3a XL


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 824px)
  and (-webkit-min-device-pixel-ratio: 2.6) {
  /* CSS Rules Here */
}

Pixel 3


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 824px)
  and (-webkit-min-device-pixel-ratio: 2.6) {
  /* CSS Rules Here */
}

Pixel 3 XL


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 847px)
  and (-webkit-min-device-pixel-ratio: 3.5) {
  /* CSS Rules Here */
}

Pixel 1, Pixel 2


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 732px)
  and (-webkit-min-device-pixel-ratio: 2.6) {
  /* CSS Rules Here */
}

Pixel 1 XL


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 732px)
  and (-webkit-min-device-pixel-ratio: 3.5) {
  /* CSS Rules Here */
}

Pixel 2 XL


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 824px)
  and (-webkit-min-device-pixel-ratio: 3.5) {
  /* CSS Rules Here */
}

 

 

LG PHONES MEDIA QUERY

LG G3, G4, G5


@media only screen
  and (min-device-width: 360px)
  and (max-device-width: 640px)
  and (-webkit-min-device-pixel-ratio: 4) {
  /* CSS Rules Here */
}

LG G2


@media only screen
  and (min-device-width: 360px)
  and (max-device-width: 640px)
  and (-webkit-min-device-pixel-ratio: 3) {
  /* CSS Rules Here */
}

 

 

ONEPLUS MEDIA QUERY

OnePlus 7


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 893px)
  and (-webkit-min-device-pixel-ratio: 2.6) {
  /* CSS Rules Here */
}

OnePlus 7T


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 916px)
  and (-webkit-min-device-pixel-ratio: 2.6) {
  /* CSS Rules Here */
}

OnePlus 7 Pro, 7T Pro


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 893px)
  and (-webkit-min-device-pixel-ratio: 3.5) {
  /* CSS Rules Here */
}

OnePlus 6, 6T


@media only screen
  and (min-device-width: 412px)
  and (max-device-width: 870px)
  and (-webkit-min-device-pixel-ratio: 2.6) {
  /* CSS Rules Here */
}

 

 

 

MEDIA QUERIES FOR TABLETS

Below are media queries for popular tablets from Apple iPad, Galaxy Tab, to Kindle Fire.  These media queries are specific to the devices so device-width were once again used rather than width.

 

iPAD MEDIA QUERY

iPad 10.2″ (7th gen)


@media only screen
  and (min-device-width: 810px)
  and (max-device-width: 1080px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS Rules Here */
}

iPad Pro 11″ (3rd Gen)


@media only screen
  and (min-device-width: 834px)
  and (max-device-width: 1194px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS Rules Here */
}

iPad Air 10.5″ (3rd Gen), Pro 10.5″ (2nd Gen)


@media only screen
  and (min-device-width: 834px)
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS Rules Here */
}

iPad Pro 12.9″ (1st Gen), Pro 12.9″ (2nd Gen), Pro 12.9″ (3rd Gen)


@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS Rules Here */
}

iPad 3, 4, 5, 6, Mini 2, Mini 3, Mini 4, Mini 7.9″ (5th Gen), Air, Air 2, Pro 9.7″ (1st Gen)


@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS Rules Here */
}

iPad 1, 2, Mini


@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
  /* CSS Rules Here */
}

 

 

SAMSUNG GALAXY TAB MEDIA QUERY

Galaxy Tab (7.7″), Tab (8.9″), Tab (“10.1″), Tab 2 (10.1″), Tab 3 (10.1″), Note (10.1”)


@media only screen
  and (min-device-width: 800px)
  and (max-device-width: 1280px)
  and (-webkit-min-device-pixel-ratio: 1) {
  /* CSS Rules Here */
}

Galaxy Tab (7.0″), Tab 2 (7.0″)


@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
  /* CSS Rules Here */
}

 

 

AMAZON KINDLE FIRE MEDIA QUERY

Kindle Fire HDX 8.9″


@media only screen
  and (min-device-width: 800px)
  and (max-device-width: 1280px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS Rules Here */
}

Kindle Fire HDX 7″


@media only screen
  and (min-device-width: 600px)
  and (max-device-width: 960px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS Rules Here */
}

Kindle Fire HD 8.9″


@media only screen
  and (min-device-width: 800px)
  and (max-device-width: 1280px)
  and (-webkit-min-device-pixel-ratio: 1.5) {
  /* CSS Rules Here */
}

Kindle Fire HD 7″


@media only screen
  and (min-device-width: 533px)
  and (max-device-width: 853px)
  and (-webkit-min-device-pixel-ratio: 1.5) {
  /* CSS Rules Here */
}

Kindle Fire


@media only screen
  and (min-device-width: 600px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
  /* CSS Rules Here */
}

 

 

 

BOOTSTRAP MEDIA QUERY BREAKPOINTS

There isn’t an industry standard for media query breakpoints so using Bootstrap breakpoints is a good starting point because Bootstrap was developed to be mobile first.

It is better practice to deviate away from targeting device specific media queries because of their ever-changing nature.  You can always start with Bootstrap’s breakpoints and make adjustments as needed.

Here are Bootstrap’s media queries breakpoints and up-values indicated by min-width  and breakpoints and down-values indicated by max-width.  Further details can be found on their documentations page.

 

MEDIA QUERY FOR MOBILE SMARTPHONES


@media only screen
  and (min-width: 576px) {
  /* CSS Rules Here */
}


@media only screen
  and (max-width: 575px) {
  /* CSS Rules Here */
}

 

MEDIA QUERY FOR TABLETS


@media only screen
  and (min-width: 768px) {
  /* CSS Rules Here */
}


@media only screen
  and (max-width: 767px) {
  /* CSS Rules Here */
}

 

MEDIA QUERY FOR LAPTOPS AND DESKTOP


@media only screen
  and (min-width: 992px) {
  /* CSS Rules Here */
}


@media only screen
  and (max-width: 991px) {
  /* CSS Rules Here */
}

 

MEDIA QUERY FOR LARGE SCREENS


@media only screen
  and (min-width: 1200px) {
  /* CSS Rules Here */
}


@media only screen
  and (max-width: 1199px) {
  /* CSS Rules Here */
}

 

 

 

SUMMARY

Screen sizes and resolutions for mobile devices are always changing and will continue to change as technology advances.  Therefore, it should be noted that media queries generally should be targeted for the browser rather than specific devices.

With that said, device specific media queries can be useful as older devices become obsolete and you need to target the smallest device viewport in use.  This will ensure that your website will be compatible for all mobile devices currently being used.

 

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *