隐藏Safari ios上的方向转换

Posted 2023-03-14

【中文标题】隐藏Safari ios上的方向转换

【英文标题】：hide the orientation transition on safari ios

【发布时间】：2014-08-26 17:35:35

【问题描述】：

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

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

here 我已经完成了适用于 android 的代码的最小版本。 正文上有来自loremPixel 的背景图片，html 标签上有红色背景。 预期的结果是：永远看不到图像旋转。只有红屏（也不旋转）

感谢您的帮助。

ps： 我想我已经将问题缩小到在 ios 上旋转 之后 和 之前 触发的orientationchange 事件>（如我所料）在 android 上

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

【讨论】：

感谢您的回答，抱歉耽搁了。但同样的问题发生了：调整大小事件在我想隐藏的丑陋过渡之后触发。

嗯，值得一试。看起来iOS可能会给予屏幕优先权，直到为时已晚。很高兴知道这个“错误”。 +1。