Skip to content
This repository

iOS4 reports landscape when it's in portrait #3707

Closed
scottjehl opened this Issue · 4 comments

3 participants

Scott Jehl Kin Blas Todd Parker
Scott Jehl

$.event.special.orientationchange.orientation() --> landscape

Kin Blas
jblas commented

This was actually a regression I introduced when I added the fix for bug #

The problem is that there is a bug in iPhone and iPod Touch devices that run iOS 4.1 and later (last checked up to iOS 5.1) where the browser ALWAYS triggers a landscape media query, no matter what orientation the device is currently in. This does NOT happen on iPad.

I filed bug 11064902 with Apple on http://bugreport.apple.com .

This may force us to resort to checking window dimensions. The one problem, at least on the iPhone/iPodTouch, is that when the user turns on the developer console for the browser, this actually makes the window width larger than the window height (320 x 306) when in portrait mode. We also can't rely on screen.width/height or screen.availWidth/availHeight because those values are always the same no matter what orientation the device is in. That is, the width and height values always report as if the device is in portrait mode.

Also, for some reason, it looks like window.innerWidth/innerHeight, window.outerWidth/outerHeight, $( window ).width()/height() all report the same values.

What I'm thinking is that perhaps we will need to do something like this:

var w = window.innerWidth || $( window ).width(),
    h = window.innerHeight || $( window ).height(),
    threshold = 50,
    is_landscape = w > h && ( w - h ) > threshold;

Worst case scenario, we are no-better than 1.0, assuming that window.orientation values of 0 and 180 mean portrait.

Kin Blas
jblas commented

FYI, I just tested the proposed threshold workaround above and it seems to work well. I tested on

  • iPhone and iPhone Retina (iOS 4.2 - iOS 5)
  • iPod Touch (iOS 4.3.5)
  • iPad (iOS 4.2 - iOS 5)
  • Motorola XOOM (Android 3.1)
  • Blackberry Playbook (OS 2)
  • Motorola Droid Global (Android 2.3)
Kin Blas jblas referenced this issue from a commit
Kin Blas Fix for issue #3707 - iOS4 reports landscape when it's in portrait
- This was a regression caused by the fix for issue #2933:

#2933
1a52240

This triggered a bug on iPhone/iPod Touch devices running iOS 4.2 - 5.1 where the browser *ALWAYS* applies a landscape media query. This bug does not exist on iPad.

- Removed the use of the landscape media query, and switched to using window.innerWidth/innerHeight w ith a threshold to determine if the device is currently in landscape mode. A threshold is necessary because on small form factors like the iPhone, the user can enable the developer console which takes up more vertical space, making the useable width of the browser window larger than the height.
e1d8f3f
Todd Parker

Just tested Kin's fix and it works perfectly. I loaded the page in both orientations then rotated each a few times and it was always accurate. The only issue is the Palm Pixi has basically a square screen so it read as portrait but this is sort of an edge case so it's not a concern. This is ready to land IMHO.

Results from this page: http://jquerymobile.com/branches/1.2/tests/functional/orientation.html

Kindle Fire (2.3) - works
Nook Color - works
Android 2.1 - works
Android 3.0 - works
Android 4.0 - works
WP7.5 - works
Playbook (2.0) - works
BB6 - works
BB7 - works
iPhone 4S (iOS5.1) - works
iPad (iOS4.3) -works
iPad (iOS5.1) -works
Palm Touchpad (3.0.2) - works

Palm Pixi (1.4) - reports portrait on both orientations, but screen is square

Kin Blas
jblas commented

@toddparker so are we waiting on @johnbender to weigh in or should I just land?

Kin Blas jblas referenced this issue from a commit
Kin Blas Fix for issue #3707 - iOS4 reports landscape when it's in portrait
- This was a regression caused by the fix for issue #2933:

#2933
1a52240

This triggered a bug on iPhone/iPod Touch devices running iOS 4.2 - 5.1 where the browser *ALWAYS* applies a landscape media query. This bug does not exist on iPad.

- Removed the use of the landscape media query, and switched to using window.innerWidth/innerHeight w ith a threshold to determine if the device is currently in landscape mode. A threshold is necessary because on small form factors like the iPhone, the user can enable the developer console which takes up more vertical space, making the useable width of the browser window larger than the height.
0837c4a
Kin Blas jblas closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.