有没有办法保证在orientationchange事件（jQuery Mobile，JavaScript）之后触发resize事件？答案

【问题标题】：Is there a way to guarantee resize event fires AFTER orientationchange event (jQuery Mobile, JavaScript)?有没有办法保证在orientationchange事件（jQuery Mobile，JavaScript）之后触发resize事件？
【发布时间】：2012-06-19 23:39:01
【问题描述】：

我遇到了 iOS 问题，尤其是 iPhone，我的 jQuery Mobile Web 应用在 jQuery Mobile 的orientationchange 事件之前触发了一个窗口调整大小事件。目前，在我的测试中，我还没有在 Android 上看到这种情况（这意味着它可能会在以后出现）。有没有办法可以保证在orientationchange事件之后触发resize事件，也许是利用window.orientation？

谢谢。

【问题讨论】：

标签： iphone events jquery-mobile resize orientation

【解决方案1】：

好消息和坏消息。坏消息是，不，你不能保证。这个错误从一开始就存在，但仍未完全解决。我不指望他们很快就会出现，我也不指望其他平台竞争对手会在他们急于以较低的开销进入市场时正确实施他们的。

好消息是，您可能甚至不需要 javascript 事件。很有可能您可以使用 CSS 媒体查询完成您想做的所有事情，并且做得更可靠。

/* Regular mobile styles */
.logo-large{
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
    background-position:0 0;
    position:relative;
    top:0;
    left:0;
    width:290px;
    height:65px; 
    margin:0 auto; 
    border:none;
}



/* Horizontal */
@media all and (min-width: 480px){
    /* put your horizontal stylings here */
}

/* HD / Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
    .logo-large{
        background-image:url(../images/logoHD.png);background-size:290px 65px;
    }
}


/* iPad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

}

【讨论】：

非常感谢您的帮助。这有点离题了；我希望内容的宽度等于纵向和横向布局视口的宽度，更不用说设备可以在页面加载后更改方向，它应该适用于 iPhone 和所有版本（1.x、2 .x、4.x）和适用于 Android 手机的分辨率。那么，如何使用 CSS 媒体查询来复制它呢？你上面的例子会允许这种动态吗？谢谢。
是的，这正是它的作用。标记为水平的部分将在他们转动手机的那一刻生效，并且规则将立即应用，而无需执行任何 javascript。事实上，即使关闭了 javascript，这种方式也可以工作。这就是所谓的响应式网页设计的开端。因此，在横版的部分标签中，只需输入您想要在他们转动手机时生效的 css 规则覆盖。
非常感谢。媒体查询中的 min-width 是报告设备宽度（即 Retina Display，960）还是视口宽度（即 Retina Display，480）？问题是存在所有不同版本的 android 分辨率，并且在我对不同版本和分辨率的测试期间，横向宽度（即 clientWidth）并不一致。例如，在野外存在分辨率为 240x320、240x400 和 240x432 的 android 设备。我的另一个想法是查询特定宽度可能需要在新设备和分辨率发布时进行维护。非常感谢。
True，从而为流体布局提供了依据。我只是将您的内容的宽度设置为 100%，左右边距可能为 5px，然后让设备根据需要重新排列内容。不要考虑固定宽度。
好的，谢谢。我就是这么做的。如果您允许用户缩放，则视觉和布局视口是相同的。我在这里报告了修复（stackoverflow.com/questions/9638622/…），这与我原来的问题有关。但我不会放弃使用 CSS 媒体查询，因为这是支持无数不同平台和设备的首选方法。再次感谢你的帮助。我真的很感激。

【解决方案2】：

您可以设置超时以等待orientationchange事件

它的工作原理

   $(window).bind('resize', function() { setTimeout( function() { messageToNativeApp('screen_resized'); }, 500); });

【讨论】：