不同设备上的不同页面

Question

我正在建立一个响应式网页。 我有不同宽度的不同布局。 一种是用于816像素以上的设备。 第二个在640到816之间。最小的一个是用于640 px以下的设备。

如果我将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) { ...