Samples not filling in display on orientationchange

[GlennGoodrich]

So, I am looking at this sample:

http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_mobilegallery.html

Select a map and in portrait, once the map loads, rotate the phone to landscape.  There is a big gap off to the right.  This also happens in  very simple map web app I have locally. 

Is this a jQuery Mobile issue?  Why isn't the map filling in the gap when map.reposition() and map.resize() are called.

(see attached photo)


We've reproduced this behavior on an iPhone4 and iPhone 3GS

Thanks,
Glenn

[JustinGreco]

I tried it on my Android, but the sample doesn't even work on it.  But if you look at the code for that sample, it is not doing anything in the orientationChanged function:
      function orientationChanged() {

      }

In the other samples, they have this:
      function orientationChanged() {
        if(map){
          map.reposition();
          map.resize();
        }
      }

[SteveClarke]

I think this is an iOS bug.

http://filamentgroup.com/examples/iosScaleBug/

I played around with this trying to find a workaround but the scaling was too big, as the bug states, when the orientation changed.  I don't think this problem will be resolved until Apple addresses the bug and I haven't found a decent workaround for it.

Also, check out the following blog post from the jQuery Mobile team about Pinch-to-zoom: Now Restored.  They make reference to this bug in their post.

http://jquerymobile.com/blog/2011/05/20/jquery-mobile-team-update-%E2%80%93-week-of-may-16th/

[SteveClarke]

Please note that I'm not an esri employee even though the esri logo is showing up beneath my name on the left of the forum posting.  I've requested the forum administrator to remove it so as not to cause confusion.

[SteveClarke]

A user on the jQuery Mobile forum suggested the following:

var changeViewport = function () {
          if (window.orientation == 90 || window.orientation == 270)
            $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
          else
            $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
          }
          window.addEventListener('orientationchange', changeViewport, true);
          try { changeViewport(); } catch (err) { }

I tried this with moderate success, at least it's the best solution I've seen so far to this problem.  But it only seems to work if I execute a task first against the map.  For example, I have to execute a task in my app that will find a feature and zoom to it on the map.  Then when I rotate my iOS device to landscape the map will fill the entire screen but my toolbars at the top of the map are hidden.  I have to tap the iOS bar at the top of the screen (that shows the time and the wifi connection strength) and then I can see my toolbar at the top of the app.  Of course, the browser's url bar also appears, but you can tap and hold the toolbar and scroll up until the url bar disappears.  The good news is that the app didn't scale too large like in my previous attempts.  And now when I rotate back to portrait the app displays normally and the map fills the entire screen as expected.  So this code is at least a step in the right direction.  Hopefully this will give you something to go on for a workaround until Apple fixes the bug.

[AaronDrake]

Steve,

I just tried your code snippet in an app I am working on, and so far so good.  Tested it on my LG G2x (Android), and my co-workers iPhone and it works great!

Thanks for sharing!