我正在构建一个响应式网页。我有不同宽度的不同布局。一种适用于超过 816 像素宽的设备。第二个介于 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 在这两个之前定义。
它有什么问题？一半的设备正确显示页面，另一半没有。