CODEWITHSUNDEEP
media-queriesretina-displayscreen-orientationcss
Vitaliy G.
Vitaliy G.

Reputation: 871

How to media query retina phone's landscape without using max-width?

I'm testing my one page site on my Galaxy S3 (1280x720 px) and I can't seem to figure out what to have for max-width. I looked it up and couldn't find a current answer—-most clear answers were from "pre-retina". (Or should they still work..?)

With pixels devices changing so rapidly, is there any way to just target media query by device's orientatino?

Upvotes: 0

Views: 1824

Answers (2)

Arcsec
Arcsec

Reputation: 36

Media queries also have an "orientation" feature which you can use in the query to detect portrait or landscape modes. The correct media query for your situation would be:

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
/* insert styles here */
}

As a side note, I made a handy media query building tool with optional device presets (the one I used here is listed as "Galaxy Nexus, landscape") if you ever need to figure out other valid media queries: http://arcsec.ca/media-query-builder/

Upvotes: 2

Richlewis
Richlewis

Reputation: 15374

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

There are plenty more, check out http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Upvotes: 1

Related Questions