Question

I’m having an issue with iOS, specifically the iPhone, where my jQuery Mobile web app is firing a window resize event BEFORE jQuery Mobile’s orientationchange event. I have not seen this occur on Android in my testing, at this point (meaning, it could spring up later). Is there a way I can guarantee the resize event fires AFTER the orientationchange event, perhaps utilizing window.orientation?

Thank you.

Answer 1

Good news and bad news. The bad news is, no, you can’t guarantee it. This bugs have been around since the beginning and still have not been fully worked out. I would not expect them to be any time soon, nor would I expect that other platform competitors will implement theirs correctly as they rush to get to market at reduced overhead.

The good news is, you probably don’t even need the javascript events. There’s a pretty good chance you can accomplish all you’re looking to do with CSS Media Queries and do it more reliably.

/* 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) {

}