CODEWITHSUNDEEP
css
qwerty
qwerty

Reputation: 229

Media queries catch tablet portrait

I have the following rules:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)

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

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

@media only screen and (min-width: 768px) /* tablets and desktops */

How to catch tablet portrait without affect the other rules?

Upvotes: 4

Views: 2609

Answers (3)

Santiago Rebella
Santiago Rebella

Reputation: 2449

@media only screen and (min-width: 768px) and (orientation:portrait) and (min-height:1024px)

You should also beside specifying min-width and min-height specify max width and height combining it with orientation, then you really catch up mobiles without affecting others like tablets or pc, right now only with min-width for mobiles will also affect all devices accomplying that min-width

Upvotes: 1

Churro
Churro

Reputation: 4366

Pure CSS has helper classes for hiding stuff in tablets.

The media query it uses for tablets is as follows:

@media (min-width: 768px) and (max-width: 979px)

You could also try adding (orientation:portrait) to that.

(As seen in http://yui.yahooapis.com/pure/0.3.0/pure.css)

Upvotes: 0

Ennui
Ennui

Reputation: 10190

There is no standard for "tablet portrait" in terms of device pixel width.

The @media orientation query is not very reliable at all and not widely supported. See here. You are best off just using min-width and max-width media queries and trying to get it to work at ALL possible widths than targeting a specific orientation. That's pretty much how responsive design is supposed to work anyway.

Portrait mode tablets will generally be between 768px and ~960px wide.

Upvotes: 2

Related Questions