Viewport height or scaling issue on iOS?

42 views
Skip to first unread message

Taco Scargo

unread,
Aug 8, 2011, 11:07:05 PM8/8/11
to phon...@googlegroups.com
Hi,

I recently started experimenting with Phonegap and I have my first application almost ready, but am running into an issue with the viewport height.

I am using Phonegap 1.0 with XCode 4 and have created a simple index.html to demonstrate the problem. I have used pastebin.com to share that with you (removed all unnecessary code):


Issue that I am having is that I am using the following HTML syntax:

<html>
  <head />
  <body>
    <div id="content">
      <div id="settings" />
      <div id="header" />
    </div>
  </body>
</html>

Using css I have specified that the content container should be '100%' high.
I have used the nativeControls plugin to use a tab-bar at the bottom.
I have disabled scrolling (so you cannot move the page when touching the background.

When I however tap into one of the two input fields, the (smaller) viewport scrolls to the input field, but when hitting done, the page does not fully scroll back, as the 'content' div is much larger than the visible screen. 

You can see that when touching one of the text input fields and moving the screen around.

What is causing this too happen.?
When I remove the height:100% from the content container, the 'body' will still be a few pixels larger than what is visible (open up the start and after hitting done jpgs in two browser tabs and alternate them)
Start:


Typing:


After hitting done:



When removing the Tab-bar plugin and leaving the 100% height of 'content', the 'scrollable screen' is still larger than 100%
Start:


Typing:


After hitting done:

After scrolling down fully


When removing the 100% indication again, I see that the content div is actually much smaller than what it should be.
Start:

I also noticed that when using pt settings instead of px (as suggested by Apple's docs), the pt values are not correct (I need to use much larger values. This might be related which is why I am mentioning it.

I see this behavior happen on both the iPhone simulator 4.3 and also on an iPhone4 running 4.3.x

Thanks, any help is appreciated!

Taco Scargo

Reply all
Reply to author
Forward
0 new messages