Different page on different devices

Question

I'm building a responsive webpage. I have different layouts for different widths. One is for over 816 px wide devices. The second one is between 640 and 816. The smallest one is for under 640 px wide devices.

If I set my browser window on PC (Firefox, Chrome, whichever browser) to any of those widths it will scale correctly and show the correct layout. If I view it on a Android tablet (Asus Transformer Prime) or iPad, it will also show up correctly (the biggest layout in landscape mode and the middle sized in portrait).

If I view it on an iPhone 5 it always shows the smallest one. In landscape it should show the middle sized, shouldn't it?

On any Android phone it shows correctly in portrait showing the smallest layout. If the device is turned to landscape it doesn't show the second biggest one and it fails to show the navigation correctly (it overlaps with the content).

My media queries are the following

@media all and (min-width: 640px) and (max-width: 816px) { ...
@media all and (max-width: 640px) { ...

CSS for the big layout is defined right before these two.

What could be wrong with it? Half of the devices show the page correctly, the other half doesn't.

Answer 1

The iPhone screen is 640px so he is using the smaller one, if you want he use a bigger one do like my example:

@media all and (min-width: 640px) and (max-width: 816px) { ...
@media all and (max-width: 639px) { ...