0

I have an issue when testing a phoengap app on my Samsung Galaxy smart phone. On the initial load, the body does not fill 100% of the viewport's height (see image.)

This happens irrespective of whether the phone is in portrait or landscape mode. However, as soon as the phone is rotated, the content fills the full height. And the problem does not appear on each future load, only if I have cleared the cache.

Does anyone know what could be causing this?

Here is the markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
      <title>Untitled Document</title>
      <style>
        html, body {
          background:#CC9;
          height: 100vh;
          min-height: 100vh;
        }
      </style>
    </head>

    <body>
      hello
    </body>

  </html>

enter image description here

mojobullfrog
  • 189
  • 3
  • 11

1 Answers1

1

Is the gap where the navigation bar would be if the phone didn't have physical controls?

I encountered a similar problem with the menu bar on my galaxy j5 on resuming. I solved it by using cordova-plugin-statusbar and then adding code to onResume to force a refresh:

    window.setTimeout(function () { StatusBar.hide(); console.log("hidden"); }, 1000);

I can see that there is a cordova-plugin-navigationbar (but haven't looked further into it) - perhaps a similar approach would work for your issue?

MStoner
  • 730
  • 4
  • 10
  • Thanks for your replies. I hadn't thought of looking into either the navigation bar setting, or applying fullscreen. In my config.xml file, I changed the value of the fullscreen preference name from 'true' to 'all'. And this has fixed the problem. – mojobullfrog Mar 30 '17 at 00:41