ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

iPad viewport

May 15, 2012 3:49am

Subscribe [2]
  • #1 / May 15, 2012 3:49am

    Hi all.

    I am having real trouble getting a site I am building to resize correctly for ipad.

    You can see the site here: http://www.richardandersphotography.co.uk

    I have added padding to ensure there is a 30px gap on each side of the site, but in portrait orientation it never fits. Does anyone have any ideas why?

    Thank you

  • #2 / May 18, 2012 6:41am

    jcowen

    66 posts

    Hi Chris,

    I’m not sure if this is going to sort things for you, but a couple initial thoughts ...

    If you remove the 30px padding, does the site fit on the screen OK?

    And if you add 30px margin instead of padding - does that make any difference?

    Cheers
    -john

  • #3 / May 18, 2012 6:47am

    Hi John. Thanks for your reply.

    I tried both and neither work.

    Have you been able to view my issue on an iPad?

    In portrait orientation it just an 8th of the width, very strange.

    Any other ideas?

    Thank you

  • #4 / May 18, 2012 6:56am

    jcowen

    66 posts

    What about if you remove the width and min-width from the masthead_wrapper?

    If that still doesn’t work - you might want to try commenting out sections to try and identify which block of content is causing problems. I’ve only had this sort of issue on iPads when I’ve been using negative margins, but I don’t think that’s an issue here. I’m sure it’s down to a width setting somewhere that’s causing the trouble.

    Let me know if you have any joy!

    Cheers

  • #5 / May 18, 2012 7:07am

    Still no change.

    I have already commented out sections to try and find the block that is causing the issue, but no result.

    I have just created a test with the following code:

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
     <meta name="viewport" content="width=device-width,maximum-scale=1.0" />
         
         <style>
      
       #test {
      margin: 0 auto;
      width: 966px;
      background: #FF0000;
      }
      
      </style>
                                       
    </head>
    
    <body>
    
        <div id="test">
         
         Hello
        
        </div>
    
    </body>
    
    </html>

    And it still doesnt resize. You can see this here: http://www.richardandersphotography.co.uk/index.php/test

    Do you have any ideas what could be causing this in this code?

    Thank you

  • #6 / May 18, 2012 7:51am

    jcowen

    66 posts

    Right - got it I think!

    The below works for me on my iPad. Basically, don’t set a width on the outermost wrapper. And if you need to declare a width, do it on an element inside this parent.

    I’m actually surprised I’ve not had this issue myself before 😊

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta name="viewport" content="width=device-width,initial-scale=1">
         
         <style>
      
       #test {
      margin: 0 auto;
      background: #FF0000;
      }
      .wrapper { width: 966px; }
      
      </style>
                                       
    </head>
    
    <body>
    
        <div id="test">
         <div class="wrapper">
         Hello
        </div>
        </div>
    
    </body>
    
    </html>
  • #7 / May 18, 2012 7:59am

    Thanks for getting back to me.

    I ran your test, and it doesnt work for me.

    The outer div is fitting the screen, but there is a large empty white space to the right? Do you get this?

    Thanks

  • #8 / May 18, 2012 9:05am

    jcowen

    66 posts

    It’s working OK for me. This is the test page I threw up: http://mekonta.co.uk/ipad.html

    Are you seeing the odd layout on this page too?

  • #9 / May 18, 2012 9:09am

    Yes, there is a white gap on the right about 2 inches or so. Its only the portrait orientation.

    Is it on yours on portrait orientation?

  • #10 / May 18, 2012 9:22am

    jcowen

    66 posts

    Oh right. I see what you mean. it allows you to scroll on over to the right doesn’t it.

    This site probably explains it better than I can here: http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/

    If you change your viewport tag to

    <meta name="viewport" content="width=966,
                                   maximum-scale=1.0" />

    it works. Though it also works if you remove the viewport tag altogether 😊 Personally I’ve only used a viewport tag when building responsive sites. I’m not sure if Apple recommend using it on fixed width sites or not. But it seems you’ll be better off without it.

  • #11 / May 18, 2012 9:38am

    Thanks John.

    I have just tried removing the viewport and even just the masthead doesnt fit.

    Can you see any reason this wouldnt resize? http://richardandersphotography.co.uk/index.php/test

    I must be missing something here? right?

  • #12 / May 18, 2012 9:46am

    jcowen

    66 posts

    Hi Chris,
    Your meta viewport tag is still in the HTML 😊

    Update that and I reckon you’ll be good!

    Cheers
    -john

  • #13 / May 18, 2012 9:54am

    Oh dear lord. I think I need coffee.

    I have removed the meta tag (checked this time) and your right it does fit.

    I then added some margins to ensure there is a gap between content and the edge of the screen and it no longer fits… what the hell?

    Any ideas?

    By the way! Nice to finally see someone from the south west on here. I am from Plymouth 😊

  • #14 / May 18, 2012 10:19am

    jcowen

    66 posts

    You can see my example here: mekonta.co.uk/ipad.html

    I think your problem is where you’ve set width: 966px on elements in your header AND padding of 30px. Which is making the actual width 1026px. Change their width to 906px (so with padding they’re 966px) and that looks good.

    Wow - yeah, never seems too many EE guys down this part of the world 😊

  • #15 / May 18, 2012 10:41am

    Hmm, okay, why doesnt it work with the width of 966px (with padding 1026px) but it does with 906px (966px with padding).

    The problem is I have to have a width of 966px without padding… surely I am not missing some obvious point again?

    Yes! However I actually live in Paris, so not sure I count.

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases