4

I'm trying to load a div and position it absolutely in mobile safari - think something like the alert box.

I tried to use an absolutely positioned div with top set to 50% with a margin half the height/width:

#overlay-message {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  margin: -67px 0 0 -110px;
  width: 220px;
  height: 125px;
}

but as I realized, the viewport is going to be different than the fixed position on the page, and the element is displayed in an offset position when the browser is scrolled down. I thought I could try to move the position using javascript based on the window.pageYOffset value, but unfortunately this shows 0 whether the chrome is shown or not.

My last thought was to calculate the browser chrome height using window.outerHeight-window.innerHeight and then move the div based on this value, but unfortunately this is not working.

I've tried (w/ jquery):

$(window).load(function() {
    chrome_height = window.outerHeight - window.innerHeight;
    alert('chrome height is ' + chrome_height + ' outerheight: ' + window.outerHeight + ', innerheight: ' + window.innerHeight); 
});

But what I'm finding is that window.innerHeight and window.outerHeight are both the same - 306 (I've got the safari developer chrome on) - so this doesn't appear to work.

Can anyone point me in the right direction on this?

thanks!

-simon

Simon
  • 1,819
  • 3
  • 18
  • 26
  • Check my answer to similar question, might help a little http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems – Dmitry Semenov Mar 30 '13 at 11:32

2 Answers2

0

This article describes the vewport problem, especially the grand tragic point when you get non-Retina dimensions for window.innerWidth/Height and Retina using window.ourerWidht/Height

Dan
  • 55,715
  • 40
  • 116
  • 154
-4

Can't you just screengrab Safari on your iPhone then bring the photo into Photoshop or similar and measure it? Remember photos captured with the "power button-home button" key press are twice the actual size on screen so divide your height by 2.

NonatomicRetain
  • 301
  • 4
  • 14
  • 1
    I'm trying to get the screen height dynamically so I can display assets on the screen based on offsets. You can't load photoshop on the iphone, unfortunately ;) – Simon Jun 28 '11 at 04:41