Skip navigation
mattdwm
mattdwm
181 posts
Sep 6, 2010
Currently Being Moderated

Fluid Grids Layout and iPhone reorientation

May 27, 2012 5:49 PM

I tried creating a new Fluids Grid Layout. When I view the page on my iPhone 4S in portrait it displays correctly. But when I tilt it into landscape the page is to wide. So I have to pinch out to get it looking right.

935 Views   6 Replies   Latest reply: C_Hauger, Jun 25, 2012 8:36 AM
 
Replies
  • SnakEyez02
    Currently Being Moderated
    1. SnakEyez02,
    May 27, 2012 5:49 PM   in reply to mattdwm
    Report

    Can you please post a link to the page in question?

     
    |
    Mark as:
  • mattdwm
    181 posts
    Sep 6, 2010
    Currently Being Moderated
    2. mattdwm,
    May 27, 2012 6:00 PM   in reply to SnakEyez02
    Report

    Here's the page. It's just the default that's created by Dreamweaver.

     

    https://dl.dropbox.com/u/8709062/dwgrids/index.html

     
    |
    Mark as:
  • SnakEyez02
    Currently Being Moderated
    3. SnakEyez02,
    May 27, 2012 6:19 PM   in reply to mattdwm
    Report

    Nothing you are doing wrong or anything wrong with the code.  If you search Google for iOS zoom bugs on screen rotation you will see tons of results.  Repsonive CSS is still in very early stages, despite the progression of mobile devices.  If you started in landscape orientation and loaded the page in that orientation it will look ok.  It's just the action of changing the orientation that causes this.

     
    |
    Mark as:
  • mattdwm
    181 posts
    Sep 6, 2010
    Currently Being Moderated
    4. mattdwm,
    May 27, 2012 6:34 PM   in reply to SnakEyez02
    Report

    Any idea how to fix it?

     

    I noticed http://gaming.adobe.com/ doesn't have this issue. It's using 960 Grid. Maybe that's the way to go. I know it won't work with the design features in Dreamweaver though.

     
    |
    Mark as:
  • mattdwm
    181 posts
    Sep 6, 2010
    Currently Being Moderated
    5. mattdwm,
    May 28, 2012 7:26 AM   in reply to mattdwm
    Report

    The script from this site fixed the problem on my iPhone 4S:

     

    if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {

      var viewportmeta = document.querySelector('meta[name="viewport"]');

      if (viewportmeta) {

        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';

        document.body.addEventListener('gesturestart', function() {

          viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';

        }, false);

      }

    }

     
    |
    Mark as:
  • C_Hauger
    Currently Being Moderated
    6. C_Hauger,
    Jun 25, 2012 8:36 AM   in reply to mattdwm
    Report

    You may also want to try <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> if you don't want a javascript solution. NOTE: both solutions will eliminate the ability to pinch zoom.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points