Question

我认为这是一个非常常见的问题，但实际上我找不到任何答案。

我正在为手机制作一个webapp /网站。当用户旋转他的手机时，我想在页面旋转之前隐藏整个身体，这种丑陋的变形/过渡。然后，完成此转换后，再次显示正文。

here我已经完成了适用于android的代码的最小版本。身体上有loremPixel的背景图像，html标签上有红色背景。预期的结果是：永远不会使图像旋转。只有一个红色的屏幕（也没有旋转）

感谢您的帮助。

ps：我认为我已经将问题缩小到在ios上轮换之后之前之前 >（正如我所料）在android

上

Answer 1

随意的想法。

$(window).resize(function() {
    $("#wrapper").css("display","none");
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

$(window).bind('resizeEnd', function() {
    $("#wrapper").css("display","block");
});

开始调整大小，隐藏包装器。没有在0.5秒内调整大小，显示。

http://jsfiddle.net/7ktg9can/

隐藏safari ios上的方向过渡

1 个答案: