我正在建立一个自适应网页。我有不同宽度的不同布局。一个是超过816像素宽的设备。第二个是640到816之间。最小的一个是640 px宽的设备。
如果我将我的浏览器窗口设置在PC（Firefox，Chrome，无论哪种浏览器）上的任何宽度，它将正确缩放并显示正确的布局。如果我在Android平板电脑（华硕Transformer Prime）或iPad上观看它，它也会正确显示（横向模式下的最大布局和纵向中间尺寸）。
如果我在iPhone 5上查看它，它总是显示最小的一个。在景观中它应该显示中等大小，不应该吗？
在任何Android手机上，它都能正确显示最小的布局。如果设备转为横向设备，则不显示第二个设备，并且无法正确显示导航（它与内容重叠）。
我的媒体查询如下
@media all and (min-width: 640px) and (max-width: 816px) { ...
@media all and (max-width: 640px) { ...
大布局的CSS就在这两者之前定义。
它可能有什么问题？一半的设备正确显示页面，另一半没有。
答案 0 :(得分：4)
iPhone屏幕为640px，因此他使用的是较小的屏幕，如果你想要使用更大的屏幕就像我的例子一样：
@media all and (min-width: 640px) and (max-width: 816px) { ...
@media all and (max-width: 639px) { ...