测试 iPad 第 4 Gen/Retina 显示

Testing iPad 4th Gen/Retina Display

2015 年 8 月 26 日编辑

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

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

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

我一直在这里尝试涉及针对 ONLY 视网膜显示器的解决方案,并且 none 完全有效。这是我尝试用...

瞄准视网​​膜的方法

问题是,出于某种原因,执行所有这些技术也以 iPad 1/2/3 为目标,这弄乱了我之前编写的代码。

vh 单位是较新的 css3 计量单位,因此较旧的浏览器会忽略它们。所以通常你会使用 vh 单位的回退。类似于:

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

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

不过,Can I Use mentions that vh units are not fully supported until iOS 8. And it mentions, there is some "buggy behavior" in prior versions of Safari for iOS. It then provides as a work around给个issue,可能会有用。

所以也许这种所谓的错误行为就是您 运行 的目的。