CODEWITHSUNDEEP
androidhtmlcssmedia-queries
UI_Dev
UI_Dev

Reputation: 3427

What will be the maximum width of tablet to use in media query?

I did some research on media queries and I am quite confused to get the tablet width.

Some examples I have found:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px)

But, nowadays tablets sizes are vary. Some tablets looks very large, so how can I find the maximum width of tablet?

So far I used like below..

# Tablet
    only screen and (min-width: 768px) and (max-width: 979px)

I need to know the maximum tablet width to fix my responsive design. And can I use minimum width of 786px for tablet? I am asking for all branded tablet devices (Samsung, ipad, Google Nexus series)

Upvotes: 5

Views: 17248

Answers (2)

Mladen Adamovic
Mladen Adamovic

Reputation: 3211

Today there are also Phablets and pixel density could be whatever (you can have full hd on 4" phones), so I'd suggest forget about targeting tablets, but rather use relative device with with min-width.

According to older measurement by Quircksmode http://quirksmode.org/tablets.html

@media screen and (min-width: 37em) {
}

however, this doesn't work best for newer tablets I guess, since my phone has 37em or more.

Therefore, I'd suggest using

@media screen and (min-width: 42em) {
}

Unless someone came to the better approach.

Upvotes: 0

GibboK
GibboK

Reputation: 74008

What I am currently using.

   /* 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 */
    }

    /* Tablet (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }

    /* Tablet (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }

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

Upvotes: 8

Related Questions