Question

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

当我将Initial-Scale设置为1时，即使媒体查询设置为宽度640px，它似乎也会使iPhone（视网膜）上的页面尺寸加倍。请注意，就我所见，媒体查询工作正常，一切都按预期进行调整。我可以通过双击来每次页面加载时缩小或通过将初始比例设置为0.5来修复双倍缩放问题。将其设置为0.5的问题是，当您在iPad上查看它时，它的大小是屏幕的一半。 1.0似乎可以在iPad上运行，但似乎在iPad上加倍（iPad和iPhone有单独的媒体查询）。

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

任何人都知道我可能做错了什么？

由于

Answer 1

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

@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">

iPhone / iPad Viewport问题

1 个答案: