CODEWITHSUNDEEP
javascriptiphoneipadresizeweb-applications
dclowd9901
dclowd9901

Reputation: 6826

iPad doesn't trigger resize event going from vertical to horizontal?

Has anyone noticed this behavior? I'm trying to write a script that will trigger upon a resize. It works fine on normal browsers, works fine on iPhone, but on iPad, will only trigger going from horizontal to vertical viewport, not vice versa.

Here's the code:

$(window).resize( function() {

    var agent=navigator.userAgent.toLowerCase();
    var is_iphone = ((agent.indexOf('iphone') != -1));
    var is_ipad = ((agent.indexOf('ipad') != -1));

    if(is_iphone || is_ipad){
        location.reload(true);
    } else {     
        /* Do stuff. */
    };
});

Upvotes: 37

Views: 37528

Answers (7)

Vincent
Vincent

Reputation: 4056

If I understood you correctly, you want to do something when the user tilts the iPad. Here you go:

window.onorientationchange = function(){

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0){

        // iPad is in Portrait mode.

    }

    else if (orientation === 90){

        // iPad is in Landscape mode. The screen is turned to the left.

    }


    else if (orientation === -90){

        // iPad is in Landscape mode. The screen is turned to the right.

    }

}

The left picture shows portrait mode, the right one landscape mode

Upvotes: 48

user1149756
user1149756

Reputation: 71

This includes all orientations.

Here are two options: 

window.onorientationchange = function() {

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0) {
    // iPad is in Portrait mode.

    } else if (orientation === 90) {
     // iPad is in Landscape mode. The screen is turned to the left.

    } else if (orientation === -90) {
     // iPad is in Landscape mode. The screen is turned to the right.

    } else if (orientation === 180) {
    // Upside down portrait.

    }
}

or

// Checks to see if the platform is strictly equal to iPad:
    if(navigator.platform === 'iPad') {
            window.onorientationchange = function() {

            var orientation = window.orientation;

            // Look at the value of window.orientation:

            if (orientation === 0) {
            // iPad is in Portrait mode.

            } else if (orientation === 90) {
             // iPad is in Landscape mode. The screen is turned to the left.

            } else if (orientation === -90) {
             // iPad is in Landscape mode. The screen is turned to the right.

            } else if (orientation === 180) {
            // Upside down portrait.

            }
          }       
        }

Upvotes: 7

B-Money
B-Money

Reputation: 1048

You want this fix for the orientation bug on iphone and ipad. read about it here: http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

github newest version here: https://gist.github.com/901295 use the second version on the page.

Upvotes: 1

Steak Overflow
Steak Overflow

Reputation: 7618

  1. do a nice check if your platform is iPad,

  2. handle the iOS specific event orientationchange by catching window.onorientationchange

    if(navigator.platform == 'iPad') {
    window.onorientationchange = function() {
        // handle orientationchange event
        // (here you can take advantage of the orientation property
        //     - see the good answer above by Vincent)
    }       
}

Upvotes: 0

JoeDuncan
JoeDuncan

Reputation: 367

Check your version of iOS.

The "orientationchange" event does not work in iOS 3.*, but it does in 4.*

Upvotes: 0

artlung
artlung

Reputation: 34013

I think what you want would be to use the iPad Orientation CSS, which looks like this:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

Also, the orientationchange event fires when the orientation is changed, according to iPad web development tips.

Together, that should give you tools enough to deal with the change.

Upvotes: 14

Nick Craver
Nick Craver

Reputation: 630429

The only thing I could find from apple:

Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position "fixed" to the viewport can end up outside the viewable content area, offscreen.

I understand the "works on the iPhone" part...but maybe it doesn't anymore? This could be a change in OS/mobile Safari since the latest public iPhone OS release shipped (the above documentation is from March 2010).

I'm going to re-tag this question adding iPhone to it, maybe one of the guys with the developer 4.0 OS release can test this? If it is the case it's been removed, this should be a bug filed/fixed before it goes live...I'm not sure on how the procedures are on this with Apple are though.

Upvotes: 1

Related Questions