Geek Answers Handbook

Media queries capture 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 a portrait of a tablet without affecting other rules?

+4
source share
3 answers

There is no standard for a “portrait tablet” in terms of the pixel width of a device.

The @media orientation request is not very reliable and is not widely supported. See here. Your best bet is to use only min-width and max-width media queries and try to get it to work at ALL possible widths than targeting a specific orientation. It pretty much depends on how flexible the design should work.

Portrait mode tablets typically have a width of 768 pixels to ~ 960 pixels.

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

You must also specify the minimum width and minimum height to indicate the maximum width and height, combining it with the orientation, then you really catch up with mobile phones without affecting others, such as tablets or PCs, now only with a minimum width for mobile phones will also affect on all devices providing a minimum width

+1
source

Pure CSS has helper classes for hiding material in tablets.

The media query that it uses for tables is as follows:

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

You can also try adding (orientation:portrait) to this.

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

0
source

More articles:


All Articles