测试iPad第4代/视网膜显示器

Question

2015年8月26日编辑

好的，这个问题可能有点粗糙，因为这个项目仍处于开发阶段，所以合法地我不允许分享它以实时显示我的问题。

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

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

我一直在尝试这里涉及 ONLY 视网膜显示器的解决方案，但根本没有任何工作。以下是我试图以视网膜为目标...

• @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而且它弄乱了我之前编写的代码。

Answer 1

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

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

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

然而，Can I Use提到vh单位在iOS 8之前并不完全支持。并且它提到，在以前版本的Safari for iOS中存在一些“错误行为”。然后它为问题提供了a work around，这可能很有用。

所以也许这个所谓的越野车行为就是你所经历的。