ios - iPad：纵向和横向模式之间的时间延迟

Question

我有一个带有 HTML5 主屏幕的 iPad 应用程序。我需要为横向和纵向模式创建两个不同的设计模板。我使用CSS@media和orientation : landscape. orientation : portrait它对我很有用。但是当我改变设备的方向时会有时间延迟。结果，我可以在一两秒内看到错误的元素大小。

我该如何解决这个问题？

Answer 1

当我删除<meta name="viewport" content="width=device-width, initial-scale=1" >时，方向之间的延迟消失了，100%，（使用 iPad2、iOS6、Safari 浏览器）。

经过更多的试验和错误，我发现initial-scale导致滞后。为什么？在我的知识库之外。这正是我发现的。但是，我现在必须为initial-scale=1每个portrait/landscape方向添加更多的 CSS 样式。

浏览器在视觉上会缩小所有内容以适应portrait并扩展landscape模式。

这是一篇关于视口的好文章。

Answer 2

这个答案对游戏来说已经很晚了，但是（至少在更新版本的 iOS - 6+ 上）在声明所有视口比例属性时我的运气要好得多：

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

声明了所有这些后，纵向和横向之间的过渡更加顺畅，延迟更少。

Answer 3

如果您无法修复此延迟，您可以尝试通过对方向变化的动画效果使其平滑。

首先在你的 CSS 中应用一个转换属性，你所有的选择器都会移动

#container, #header h1, #header h2, #header h3 {
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-transition-delay: 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

您可以查看我使用此技术的网站