CODEWITHSUNDEEP
ioscssresponsive-designmedia-queries
x-y-z-select
x-y-z-select

Reputation: 95

Media query for landscape view

I need query for mobile iPhone 5 and galaxy S4 landscape view...

Her is my code but something is not ok here. 

    @media 
(max-width : 800px){
// style

@media 
 (max-width : 360px){  
//style

On resolution 360 evrything is ok, What i need to enter for landscape view.

Here is EXAMPLE

Upvotes: 0

Views: 99

Answers (2)

Alex
Alex

Reputation: 11245

Use device-aspect-ratio for iPhone 5 - it does not have a 16:9 aspect ratio. It is in fact 40:71.

iPhone 5 only:

@media screen and (device-aspect-ratio: 40/71) and (orientation:portrait) {
    /*style here*/
}

Galaxy S4 only:

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    /*style here*/
}

Upvotes: 0

Danield
Danield

Reputation: 125443

From this site:

iPhone 5 in landscape 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) 
{ 
   /* STYLES GO HERE */
}

Samsung Galaxy S4 Landscape (from here)

@media screen (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
  and (device-width: 1920px)
  and (orientation: landscape) {
  /* Your styles here */
}

Upvotes: 1

Related Questions