Phonegap web view thinks device screen taller than it is - results in offscreen tabbar

StackOverflow https://stackoverflow.com/questions/12334699

Question

I have a jQTouch application loaded via server, so all I need to do is display the webpage full screen in PhoneGap for a faux-Native app. Unfortunatley each solution I've tried in PhoneGap has an issue: it thinks the screen size is taller than it is. This resuls in the tabbar that is pinned to the bottom being permantly offscreen and there fore unusable. You should be able to recreate this with my code below and going to the iTabbar online demo. Any thoughts on how to correct this issue?

For background, going to the app page in iOS safari works fine, as well as saving the page to the home screen. In both cases the webview stops at the bottom of the screen and the tabbar is therefore viewable. Also, I'm using build.phonegap.com to compile (I'm not compiling locally)

I've tried two methods:

  1. load the childBrowser plugin and call up the page (with navbar hidden via options)

  2. set the following config.xml parameter to prevent phonegap from switching to Safari, and then just load the link (preferable as it's cleaner in my mind. I've pasted my index.html and config.xml below)

Details on the config.xml paramater:

Open all links in WebView

stay-in-webview with values true or false

  • example: <preference name="stay-in-webview" value="true" />

  • if set to true, all links (even with target set to blank) will open in the app's webview

  • only use this preference if you want pages from your server to take over your entire app

  • default is false

(Source: https://build.phonegap.com/docs/config-xml)

my index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-type" content="text/html;charset=utf-8">

<title>MyApp</title>

<script src="phonegap.js"></script>

</head>
<body>
<p><a href="http://www.itabbar.com/itabbar/demo.html#home">Launch iTabbar</a></p>
</body>
</html>

my config.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
    xmlns:gap = "http://phonegap.com/ns/1.0"
    id        = "com.phonegap.myapp"
    versionCode="10" 
    version   = "1.0.0">

<!-- versionCode is optional and Android only -->

<name>MyApp</name>

<description>
    My app is...
</description>

<author href="https://myurl.com" email="me@myurl.com">
    me
</author>

<preference name="stay-in-webview" value="true" />

</widget>
Was it helpful?

Solution

Thanks to PhoneGap Support for pointing me in the right direction. The issue was in fullscreen.js:

window.navigator.standalone is a binary read only parameter that fullscreen.js uses to determine if the webapp was launched from the homescreen or within a browser. If it's false (ie in a webbrowser) it adds 60px to allow for the address bar. If it's true (ie launched from the home screen) no pixels are added to the height.

So, when I was launching from within phonegap, window.navigator.standalone was false, even though it should have been true. This caused the 60px to be incorrectly added. For now I've just hardcoded it to true.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top