I am encountering an issue with testing a PhoneGap application on my Samsung Galaxy smartphone. Upon initial load, the body does not completely fill 100% of the viewport's height (please refer to the screenshot attached.)
This occurrence is independent of whether the phone is in portrait or landscape mode. Strangely enough, upon rotation of the phone, the content then fills the full height as expected. Furthermore, this problem only arises after clearing the cache but not on subsequent loads.
Does anyone have any insights into what might be causing this behavior?
Below is the provided 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>