CODEWITHSUNDEEP
ipadhtmlcss
Brenden
Brenden

Reputation: 8774

iPad CSS Page Width

I'm having some issues with my page and header on the iPad vs desktop.

When you look at http://www.photopile.me on the computer, the pictures and header/footer should stretch 100% of the way to the edge. enter image description here

When you go to it on the iPad, it doesn't show the full width of the page and the 100% header gets resized. I'd like the ipad to show the full width of the page. enter image description here

I'm just getting started optimizing for iPad, but what am I missing? I'm sure there's a stupid little rule I'm missing. Here is the header HTML

<header>
    <div id="header-wrapper">
        ... header content ...
    </div>
</header>
<div id="page-content">
        .... photos ....
</div>

and CSS

header {
    background: url('../images/header-bg.jpg') repeat-x top left;
    z-index: 500;
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
    position: fixed;
    top: 0;
    width: 100%;
}
#header-wrapper {
    padding: 10px;
    position: relative;
}
#page-content {
    margin: 0 auto;
    z-index: 400;
    position: relative;
    margin-top: 91px;
    overflow: hidden;
}

Hope that's enough info!

Upvotes: 3

Views: 21589

Answers (2)

Benjamin
Benjamin

Reputation: 1286

You may look into the zoom control via meta tags. I had some issues with this recently when the iPad was scaling up my page and I didn't realize it. (which caused me to inadvertently develop with incorrect sizing)

<meta name="viewport" content="initial-scale=1">

Possible values:

  • initial-scale
  • max-scale
  • min-scale
  • user-scalable
  • width
  • height

You can read up more on it here: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

Upvotes: 13

sandeep
sandeep

Reputation: 92863

@brenden,

write min-width:1024px; instead of min-width:1180px; in the #wrapper because it's a problem of your PC also. Check yourself.

Upvotes: 3

Related Questions