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浏览器）。

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

浏览器直观地缩小了所有内容以适应portrait并以landscape模式展开。

这是great article about viewports。

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

您可以查看我使用此技术的my website

iPad：纵向和横向模式之间的时间差

3 个答案: