javascript - 隐藏 safari ios 上的方向转换

Question

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

我正在为移动设备制作一个网络应用程序/网站。当用户旋转他的手机时，我想在页面旋转之前隐藏整个 body ，带有丑陋的变形/过渡。然后，完成此转换后，再次显示正文。

here我已经完成了适用于 android 的代码的最小版本。背景图片来自 loremPixel在 body 上，以及 html 标签上的红色背景。预期的结果是:永远不会看到图像旋转。只有红屏(也不旋转)

感谢您的帮助。

ps:我想我已经将问题缩小到 orientationchange 事件在 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/