测试 iPad 第 4 代/Retina 显示屏答案

【问题标题】：Testing iPad 4th Gen/Retina Display测试 iPad 第 4 代/Retina 显示屏
【发布时间】：2015-11-19 07:27:27
【问题描述】：

2015 年 8 月 26 日编辑

好的，这个问题可能有点粗糙，因为这个项目仍处于开发阶段，所以在法律上我还不能分享它以实时展示我的问题。

我遇到的问题是我正在为客户构建网站，当我们开始测试阶段时，我通过了除第四代 iPad 之外的所有测试。然后我们开始发现，在 ANY 视网膜显示器（第 4 代/第 5 代，iPad air）中查看时，我的所有代码看起来都非常大。

问题不在于vh/vw 属性不起作用，问题在于20vh（视口高度的20%）突然变得巨大。我正在使用内部容器对象的填充通过使用padding-top: 20vh; padding-bottom: 20vh; 将其父容器中的所有内容垂直居中。

我一直在这里尝试涉及仅视网膜显示器的解决方案，但根本没有任何效果。以下是我尝试针对视网膜的...

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { /* STYLES GO HERE */}
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=0">

问题在于，出于某种原因，执行所有这些技术也针对 iPad 1/2/3，这会弄乱我之前编写的代码。

【问题讨论】：

【解决方案1】：

vh 单位是较新的 css3 度量单位，因此较旧的浏览器会忽略它们。所以通常你会使用 vh 单位的后备。比如：

.container {
height: 1024px;
height: 100vh;
}

不理解 vh 的浏览器会跳过它并使用像素。

然而，Can I Use 提到直到 iOS 8 才完全支持 vh 单位。它提到，在 iOS 的早期版本中存在一些“错误行为”。然后它将a work around 提供给问题，这可能很有用。

因此，也许这种所谓的错误行为就是您遇到的问题。

【讨论】：

是的，我已经完成了大部分工作，我应该更具体一些。我希望仅针对像素比为 2 的设备，但如果我无法在 chrome 或 ff 中对其进行测试，我无法判断它仅针对视网膜显示器，而不是我已经为普通 ipad 完成的平板电脑跨度>
给你一个赞成票，因为我学到了一些新东西，哈哈。不知道你可以按宽高比查询。
整个事情很奇怪，因为现在我意识到查询@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit- min-device-pixel-ratio: 2) 现在也针对较旧的 iPad。我赢不了哈哈。我只想针对视网膜来提供硬编码的像素值。
也不是这个错误是 iPad 看不到 vh 或 vw css 道具。问题是它可以很好地看到这些道具，但是 20% 的视口高度或宽度突然变得很大。这对我来说毫无意义。
是的，我听到您的第一条评论，当您没有视网膜和非视网膜 ipad 时，很难在 ipad 视网膜上进行测试。完全是一种痛苦。