CODEWITHSUNDEEP
iphonecssmeta-tagsmedia-queriesviewport
technopeasant
technopeasant

Reputation: 7939

getting content to play nice on iOS

my site is a small, 540x500px box centered on a page. iPhone and Blackberry are both cutting off the top of the content. I have it absolutely centered on the page. I've been messing with the meta viewport settings in hopes have getting the page's margins dealt with on other devices and have had some luck, but when it comes down to it i cant find a solution that combines both of my lines of code.

My code is below.. I've explored media queries, setting the meta to device-width (cuts off margins) and a host of other options. honestly, I know I'm being picky, and I've spent a stupid amo unt of time on this.

I need help!

First, the HTML

<div id="container">content</div>

CSS

#container {
    width:540px;
    height:500px;
    top:50%;
    left:50%;
    margin:-250px 0 0 -270px;
    position:absolute;
}

Meta settings

<!--<meta name="viewport" content="width=device-width, initial-scale=1">
    cuts off top of content-->
<!--<meta name="viewport" content="width=580, height=540">
    works for iPhone-->
<!--<meta name="viewport" content="width=540, height=500">
    works for iPad-->

Upvotes: 1

Views: 2128

Answers (2)

technopeasant
technopeasant

Reputation: 7939

Apple recommends that any page below 980px be declared in width in your viewport settings. http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

Used a media query to adjust my negative margins for mobile use. 1024px is max resolution on an iPad.. which covers most tablets.

HTML heading

<meta name="viewport" content="width=500">

CSS heading

  @media only screen 
  and (max-device-width:1024px) {
    #container {
      width:500px;
      height:500px;
      top:0;
      left:0;
      margin:0 auto;
      position:static;
    }
  }

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34855

It looks like your negative top margin is cutting off the content.

I've found that mobile content works best when positioned in a linear, top down fashion.

If that is the only div on the page, use a mobile stylesheet to strip out the positioning, keeping only the width, height, and some smaller, simpler margins.

Then use something like <meta name="viewport" content="width=580">, setting only the width.

This has worked for me in the past.

Upvotes: 0

Related Questions