不同设备上的不同页面

Posted 2023-03-06

【中文标题】不同设备上的不同页面

【英文标题】：Different page on different devices

【发布时间】：2013-05-17 12:01:08

【问题描述】：

我正在构建一个响应式网页。我有不同宽度的不同布局。一种适用于超过 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 在这两个之前定义。

它可能有什么问题？一半的设备正确显示页面，另一半没有。

【参考方案1】：

iPhone 屏幕是 640 像素，所以他使用较小的屏幕，如果您希望他使用较大的屏幕，请按照我的示例：

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

【讨论】：

谢谢。我没想到……重叠的价值观。