iPhone/iPad 视口问题答案

【问题标题】：iPhone/iPad Viewport issuesiPhone/iPad 视口问题
【发布时间】：2012-10-10 07:06:26
【问题描述】：

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

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

总结：iPhone 上的 Scale 1.0 使页面缩放翻倍，在 iPad 上很好。在 iPhone 上缩放 0.5 倍，在 iPad 上缩放一半。

有人知道我做错了什么吗？

谢谢

【问题讨论】：

只是一个问题，当您取出initialScale 属性时会发生什么？
@Jon 问题似乎消失了。但是，当您从纵向转到横向时，它会自行缩放，这是 iOS 错误/功能吗？如果关闭了用户缩放，则意味着站点在旋转时将保持缩放状态。
@TheTechBox 来自Normalize.css 的这条规则可能对您有用：/* Prevents iOS text size adjust after orientation change, without disabling user zoom. */ html { -webkit-text-size-adjust: 100%; }

标签： html ios css media-queries viewport

【解决方案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">

【讨论】：

针对更高分辨率的设备是否适用于 iPad（视网膜前）？