0

我最近一直在尝试进入响应式设计。到目前为止，我遇到的唯一问题是 iPad 和 iPhone 上的视口。

当我将 Initial-Scale 设置为 1 时，即使媒体查询设置为宽度 640 像素，iPhone（视网膜）上的页面大小似乎也会增加一倍。请注意，据我所知，媒体查询工作正常，一切都在调整。我可以通过在每次页面加载时双击缩小或将初始比例设置为 0.5 来解决双重缩放问题。将其设置为 0.5 的问题在于，当您在 iPad 上查看它时，它只有屏幕大小的一半。1.0 似乎适用于 iPad，但似乎在 iPad 上加倍（iPad 和 iPhone 有单独的媒体查询）。

摘要：iPhone 上的 Scale 1.0 使页面缩放翻倍，在 iPad 上很好。在 iPhone 上缩放 0.5 精细，在 iPad 上缩小一半。

有谁知道我可能做错了什么？

谢谢

4

1 回答 1

0

有一个“像素比率”的媒体查询，以便您可以定位更高分辨率的设备：

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

}

另外，您是否width=device-width在视口元标记中进行设置？

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2012-10-09T23:06:26.300 回答