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

Posted 2023-03-12

【中文标题】iPad：纵向和横向模式之间的时间延迟

【英文标题】：iPad: Time lag between portrait and landscape modes

【发布时间】：2012-06-13 21:03:15

【问题描述】：

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

我该如何解决这个问题？

【问题讨论】：

你有链接吗？我想在我的 iPad 上看到上述效果。

@Ceane Lamerez：很遗憾我无法分享链接。我签署了 NDA 文件。

幸运的是，我已经能够重现相同的效果。看来 Safari 需要时间来渲染和显示新的变化。

你有没有找到解决这个问题的方法？我实际上认为现在不可能，但如果你发现了一些东西，如果你能分享一下，那就太好了！干杯。

【参考方案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 模式下扩展。

这是great article about viewports。

【讨论】：

我可以确认删除 initial-scale 为我解决了滞后问题，即使使用以下内容：<meta name="viewport" content="width=device-width, height=device-height, viewport-fit=cover, maximum-scale=1.0, user-scalable=no">

【参考方案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" />

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

【参考方案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看看我使用这个技术的地方

【讨论】：

谢谢，但网站无法正常扩展。