不同设备上的不同页面

Question

我正在构建响应式网页。我对不同的宽度有不同的布局。一个是超过816 px宽的设备。第二个是在640和816之间。最小的是在640像素宽的设备下。

如果我在PC（Firefox，Chrome浏览器）上将浏览器窗口设置为任何宽度，它将正确缩放并显示正确的布局。如果我在Android平板电脑（Asus Transformer Prime）或iPad上查看它，它也会正确显示（横向模式下的最大布局和纵向中等尺寸的布局）。

如果我在iPhone 5上查看它，它总是显示最小的一个。在景观中，它应该显示中等大小，不是吗？

在任何Android手机上，它都能正确显示最小布局的肖像。如果设备转向横向显示，则不会显示第二大尺寸，并且无法正确显示导航（与内容重叠）。

我的媒体查询，是为大布局以下

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

CSS在这两个前右定义。

它有什么问题？一半设备正确显示页面，另一半则不正确。

Answer 1

iPhone的屏幕是640像素，所以他是用较小的一个，如果你想自己用一个更大的不喜欢我的例子：

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