scottjehl / ios-orientationchange-fix Goto Github PK

The fix doesn't seem to work in the latest Xcode simulator (iOS Simulator 5.1). I tested with the demo page. Anyone else having trouble?

In landscape mode zooming is enabled, but in portrait mode it's not. This occurs in iOS 5.0.1. It would be great if this could be fixed.

IE < 9 throws a JS error since it doesn't support this method. This can be fixed -- and the script can be exited early on all desktop browsers -- by changing line 8 from this:

if( !doc.querySelector ){ return; }

to this:

if( !doc.querySelector || w.orientation === undefined ){ return; }

Another approach would be to use UA sniffing, as suggested in issue #4. This is one of those rare cases where I think it might be a better idea than feature detection.

The demo page referenced in the README.md no longer exists.

I've already posted this on the original Gist, but replicated here on the repo as well.

I fear this could be quite dangerous, especially if adopted by a large project that is widely used?

This does work great - very clever solution! My only reservation is that iOS5 uses geolocation for compass calibration the whole time the browser window is open. I'm not sure what effect this has on battery life, but might be worth consideration?

You can enable the status bar icon for this in:

Settings -> Location Services -> System Services -> Status Bar Icon set to On

Edit - perhaps an alternative event could be to use devicemotion instead of deviceorientation? This would mean it does not require a gyroscope (only iPhone 4+), and could be done using just raw accelerometer events.

... to rule out running this on other platforms, and potentially bringing unexpected results.

Awesome plugin!

Not sure if this is something worth doing, but might you consider adding a version number?

Having a version number makes it a little easier to check for updates.

I typically like to follow this guideline:

A normal version number MUST take the form X.Y.Z where X, Y, and Z are non-negative integers. X is the major version, Y is the minor version, and Z is the patch version. Each element MUST increase numerically by increments of one. For instance: 1.9.0 -> 1.10.0 -> 1.11.0.

Thanks for your consideration. :)

I heard that orientation zoom issue has been fixed from Iphone 6 onwards. But I am seeing the same issue on Iphone X.

I was going through your fix and found that it is only supported till Iphone 5.

I was just wondering if something can be done to fix the same on Iphone 6 onwards as well, if issue still presents there.

Thanks,
Rahul

Testing this I found an interesting side effect to this script on iPhone/iPod touch hardware. When a element is added to the page, triggering the select to display the options causes the page to zoom. Rotating to landscape orientation zooms further. Here’s a test page: http://dirtystylus.com/sandbox/iosorientation/index.html Compare to a version using the orientation fix by Jeremy Keith: http://dirtystylus.com/sandbox/iosorientation/adactio.html In the adactio version the page doesn’t zoom when the select element is triggered. The select widget doesn’t trigger a zoom on either version when using the iPad.

When Lock Rotation is on and you rotate your screen you can't zoom. This may seem like an edge case but for everybody who reads in bed it happens all the time: when you turn around to lay on your other side or when you switch Lock Location on.

For me, and everybody else who uses his iPad mostly in bed to read, this fix (like all fixes actually) is worse than the bug. I agree that the bug is annoying but I also understand that the only people who see it are designers, developers and testers; normal people rarely change the orientation of their device, especially when the layout is optimized for every resolution. I have no problem at all explaining that to my clients.

It would be nice if fixes like this were not announced as the definite solution and were tested more thoroughly, I really hope people don't implement this on their photo site, for me their site would be less useful.

Patch to follow

Any hope in dual licensing this as MIT & GPL? (like eCSSential)

So, we were bulding a new site that needs to be responsive and one of the requirementes was to have zoom.
We used this script before so it seemed a good solution. But theres an issue (and i'm 99% sure it's not your fault):

When a user scrolls and rotates the device the devicemotion event doesn't fires, thus never disabling zoom.
This also happens if you rotate it too fast.

Both of them are not really big issues but are something to have in mind.

Turns out that adding a listener to devicemotion event corrupts page cache, aka back-forward button cache. Easily tested by adding below script to page and browsing between pages using back button.
window.onpageshow = function(e) {
console.log(e.persisted);
};

More about page cache: https://www.webkit.org/blog/427/webkit-page-cache-i-the-basics/

I've found this doesn't work on iPod Touch 2nd gen (iOS 4.2.1) and 1st gen (iOS 3.1.3). Verified with my own app, as well as your test page.

It does work very well on iPhone 4S and iPod Touch 4th gen that are both running iOS 5.0.1.

Do any of those device orientation callbacks require a gyroscope?

Device: iPad (First generation)
iOS version: 5.0.1

I did some debugging and it looks like the deviceorientation event never fires on the iPad. As a result, the checkTilt handler never runs and zoom isn't disabled before the device is rotated.

Here's a screenshot immediately after rotating the device to landscape:
http://cl.ly/3X1i38473n1Z023N2f3K

Noticed this with my ipod touch running ios5.

Steps to reproduce:

1. Open the test page at http://scottjehl.github.com/iOS-Orientationchange-Fix/ in portrait.
2. Rotate so that landscape mode is shown, notice that the page looks correct.
3. Press the home button to close the browser.
4. Tap the safari icon to reopen safari, make sure you are still in landscape mode.
5. Safari reopens in portrait mode, but immediately rotates to lanscape.
6. Notice that the text is double-sized and runs off the right edge of the screen.

Otherwise it's a handy script and thanks for putting it out there!

I was presented with a bug on a site and I tracked it down to this script. It uses the current minified src provided in this repo. The following error is thrown (copied from the ios5 safari debug console):

JavaScript: Error
undefined
TypeError: 'undefined' is not an object

This happens on iOS 5.1.1, 1st gen iPad.

Looks like Apple has fixed this issue in Mobile Safari in iOS 6! \o/

The README could be updated to reflect that, along with possibly not applying this hack when iOS 6 is detected.

The bug still exists when switching from portrait to landscape on an iPhone 3GS running iOS 5.0.1.

(This fix works on an iPhone 4 running iOS 5.0.1 though)