• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

iPhone Viewport and position absolute

January 20, 2012 by Webhead

Problem

I have a div with id “stripe” that is using absolute positioning to be at the top of the page and span 100% of the page width.  It overlays the top part of the website.  The rest of my page is 1000px wide.  When viewing on the iPhone, the “stripe” div is only a portion of the screen width.  Why?

 

Solution

If you debug the website for the iPhone, you’ll see that the width of the “stripe” dive is only 320px.  Sound familiar?  That’s because the width of the iPhone is 320px and so 100% of the viewport is 320px according to the iphone.  There are many possible solutions for this.  One solution is to make the “stripe” div’s position relative.  The relative allows the 100% width expand the entire 1000px .  Then in the following div set the margin-top to negative of whatever the “stripe” div’s height is.

Filed Under: Coding Tagged With: css, debug, firebug, iPhone

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools