I am developing a phone-gap application. Phone-gap uses HTML 5, CSS 3 and java script to render html in the default web kit of device. The scenario of the application is that it it show the web page of third party in the IFrame of our app page view. Before explaining the problem I would like to demonstrate an example here.
See the 1 image here: (copy and paste it in new browser to see image.)
https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042400/1.png?1396949391
The above Image is the default web browser of the android device. I have open a web page in the default browser. You will see that the payment div is smaller than the actual device screen size and adjust it self in this manners.
Now see the 2 image here:(copy and paste it in new browser to see image. )
https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042401/2.png?1396949638
The above Image is the Google Chrome web browser of the android device. I have open a web page in the Google Chrome browser. You will see that the payment div occupying the full device screen size and adjust it self in this manners. I think What is done here is the GWT(Google Web Toolkit) render the received html and render it efficiently by recognizing that the actual html is smaller than the device screen width and implicitly stretch it to the device screen and discard the empty padding.
Now I am coming towards my phone-gap problem. Below is the screen shoot of the my app running in the device. see the 3 Image below:(copy and paste it in new browser to see image. )
href="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042403/3.png?1396949903
What is done here? The phone-gap rendered the received html and by help of native web tool kit of android device(as this app is currently testing on android). You can see that the received html div is smaller than the actual screen size(likely to be same as in pic 1). It is not giving the proper look and feel of a mobile application. How can I make it possible that the (image 3) received html to stretch to the full size of device screen. I have edit a image to illustrate you that What I actually wants.
The below Image is my requirement.
This is the 4 image (it is not the actual snap shoot but it is required):
href="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042406/4.png?1396950380
kindly help me how can I get the Google chrome browser like view in phonegap?
Edit 1:
This is my index.html file code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/mycss/themes/default/jquery.mobile-1.2.0.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<style>
.header{
display:inline-block;
text-align:center;
width:100%;
height:100px;
background: #203864; !important;
}
</style>
<script src="js/myjs/jquery.js"></script>
<script src="js/myjs/jquery.mobile-1.2.0.js"></script>
<script>
function fixiFrame () {
$("#formframe").width($(window).width() );
$("#formframe").height($(window).height() * 0.83 | 0 );
}
</script>
<title>My Test App</title>
</head>
<body>
<div data-role="page" id="main" >
<div data-role="header" class="header" >
<a href="#" data-role="button" data-icon="back" class="ui-btn-right" data-transition="slide" onclick="formHomeButtonClick()">Home</a>
</div>
<div id="iFrameDiv" >
<iframe id="formframe" width="100" height="650" src="form.html" onLoad='fixiFrame();' frameborder="0" ></iframe>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
navigator.splashscreen.show();
</script>
</body>
</html>
and this is form.html file code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport"
content="user-scalable=yes,
initial-scale=0.5,
maximum-scale=0.5,
minimum-scale=0.5,
width=device-width,
height=device-height,
target-densitydpi=250"
/>
<link rel="stylesheet" href="css/mycss/themes/default/jquery.mobile-1.2.0.css">
<script src="js/myjs/jquery.js"></script>
<script src="js/myjs/jquery.mobile-1.2.0.js"></script>
</head>
<body >
<div data-role="page" id="billPage"><br>
Please Enter the Customer Billing Details
<form id="billForm" method="POST" action="https://ipg.comtrust.ae/SPIless/Registration.aspx" >
<div data-role="fieldcontain" class="ui-hide-label">
<label for="OrderID"> Account Number: </label>
<input type="text" name="OrderID" id="OrderID" value="" placeholder="Account Number"/>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="Amount"> Billing Amount (USD):</label>
<input type="text" name="Amount" id="Amount" value="" placeholder="Billing Amount (AED)" />
</div>
<input type="hidden" name="OrderName" value="Pizza-Grill" />
<input type="hidden" name="Currency" value="USD" />
<input type="hidden" name="Customer" value="Online" />
<input type="hidden" name="Language" value="en" />
<input type="submit" data-inline="true" data-transition="pop" value="Continue" id="submitButton" onclick="return checkform();" />
</form>
</div>
</body>
</html>
