视网膜显示和缩放问题

Question

我有一个专为iPhone 3设计的网络应用程序，使用css3＆amp; HTML5。即使在阅读了“css像素”与“物理像素”之后，转向iPhone 4和视网膜显示也是一个挑战。

我的网络应用程序会在屏幕右侧创建相当多的“隐藏”页面，而“主屏幕”上的按钮会将所需页面滑动到屏幕上。我使用以下转换来隐藏屏幕外的页面：

-webkit-transform: translate3d(+100%,0,0)

一切都适用于iPhone 3，但iPhone 4并排显示两个页面，我认为因为视网膜显示的宽度是其两倍。

我已经能够解决这个问题但是改变了我的元标记：

<meta name="viewport" content="width=device-width,user-scalable=no">

为：

<meta name="viewport" content="width=device-width, initial-scale=1.0,
 minimum-scale=1.0, maximum-scale=2.0, user-scalable=no">

并使用display属性隐藏屏幕外的页面：

display: none

但我还有一个问题我无法解决。在iPhone 3上旋转设备以横向缩放文本。在iPhone 4上使用了更宽的屏幕，但没有缩放文本。

非常感谢任何建议，

蒂亚

Answer 1

您可以通过-webkit-text-size-adjust CSS属性禁用此行为：

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

Safari Web Content Guide中进一步描述了此属性的使用。