css - 测试 iPad 第 4 代/Retina 显示屏

Question

2015 年 8 月 26 日编辑

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

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

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

我一直在这里尝试涉及针对 ONL 视网膜显示器的解决方案，但没有一个有效。这是我尝试用...瞄准视网膜的东西。

• @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;
}

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

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

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