iPhone 5 landscape media queries not working

Question

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...

Answer 1

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