IOS Orientation about flexnav HOT 15 CLOSED

@wintnerdzn: I believe that is due to the mobile safari viewport orientation change bug (http://filamentgroup.com/examples/iosScaleBug/).

from flexnav.

Thanks, Jason. But doesn't that defeat the purpose of the FlexNav? Is there something we can write to override this behavior?

from flexnav.

@wintnerdzn: FlexNav provides a common pattern for responsive navigation only and doesn't address other issues a developer may come across during development.

There are a few solutions to the mobile safari orientation change bug:

• Add javascript to your page that "fixes" the iOS bug: http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/
• Change the viewport meta tag to disable zooming: http://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page
• Leave it to it's default behavior as the user can ultimately double tap to zoom back out.

from flexnav.

My project uses
this:
meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

and is still experiencing this bug. So JavaScript to disable user scaling will not help.
Thank you for creating FlexNav, it is a great solution but this makes it not responsive in widely-used devices.

from flexnav.

@wintnerdzn: Do you have the site up on a server? I'd be happy to debug.

from flexnav.

Thanks, Jason! This is in early development and I have a lot of work optimizing ahead...
(everytime I get ready to optimize I come across another bug to debug! Ugh! But, I'm sure learning a lot!)
http://www.wintnerdesign.com/

from flexnav.

I've set up a testing site for Flexnav with zoom disabled: http://jasonweaver.name/lab/flexiblenavigation-nozoom . Using <meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />

Looks like your issue is not with navigation but some sort of strange page rendering in landscape. (I'm testing on a 3rd gen iPad running iOS 6.0)

from flexnav.

Hmmm. I read that the bug no longer exists in iOS6.
But your test site seems ok on my iPad version 5.1. Thanks.
Now, to figure out why the bug is in my code...

from flexnav.

@wintnerdzn: Ok cool. I'm going to close this issue. Thanks.

from flexnav.

Wait. I'm seeing an issue in console in your solution even.

from flexnav.

Viewport argument value "device-width;" for key "width" not recognized. Content ignored.
What's that?

from flexnav.

Oh right. I had semicolons instead of the proper commas separating attributes in the meta tag. I've changed the meta tag to <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />

from flexnav.

Thank you, Jason. Don't know why but you fixed it on my iPad. Will have to check the iPhone version 4.2 later (not available now.)

from flexnav.

Thank you Jason.

from flexnav.

@wintnerdzn You're welcome. :)

from flexnav.