5

I want to display my page for portrait and landscape iPhones in a different way.

On iPhone 4/4S devices everything works fine (portrait and landscape), but on iPhone 5/5s just the Portrait mode works fine (landscape shows the normal PC website).

Do you know what is wrong?

My queries look like that:

Portrait:

@media (max-width: 320px) {
...
}

Landscape:

@media (min-width: 321px) and (max-width: 568px) {
...
}

UPDATE

My queries look now like

@media (max-width: 320px) {
    ...
}

@media screen and (max-device-width: 568px) {
    ...
}

but the picture is the same. iPhone 4/4S (portrait/landscape) and iPhone 5/5s (portrait) works, iPhone 5/5s (landscape) works not...

John Brunner
  • 2,842
  • 11
  • 44
  • 85

2 Answers2

5

There are media queries for portrait and landscape:

@media screen and (orientation:portrait) { 
    … 
}

@media screen and (orientation:landscape) {
    …
}

If you specifically want to target iPhone, here is a great resource: LINK

Turnip
  • 35,836
  • 15
  • 89
  • 111
  • 1
    ok thanks. but why are my queries not working? because an iphone 5 in landscape HAS max-width: 568px, or not? so the width is between 312px and 568px.. isn't it? – John Brunner Nov 05 '13 at 14:06
  • Because the `min-width` is not `321px`. It is `min-device-width: 320px`. Or just get rid of the `min` altogether and use `max-device-width: 568px` – Turnip Nov 05 '13 at 14:07
  • thanks for your answer. maybe i'm too stupid for that but please have a look at my updated question – John Brunner Nov 05 '13 at 14:32
0

For iPhone 5S landscape the media query wil be - 

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

For any other smartphone whose device width you don't know, you can check and get the device width from - http://www.mydevice.io/ This may be helpful in making media queries targeting the smartphones of smaller companies like micromax, lava, etc

yogihosting
  • 5,494
  • 8
  • 47
  • 80