I am using PhoneGap along with JQuery Mobile and HTML elements for implementing my project.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="target-densityDpi=device-dpi, width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>Meri Mrji</title>
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/jmobile.min.css" />
<script src="jquery.js"></script>
<script src="jquery.mobile.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div data-role="page" id="signup" >
<div class="contentwrap">
<section>
<div class="sectionhead">
<h1><strong>Sign Up</strong></h1>
</div>
<form class="forms" action="http://google.com" type="POST">
<h1>Please enter <strong>Your Details</strong></h1>
<input type="text" placeholder="Full Name" />
<input type="email" placeholder="Email Address" />
<input type="tel" placeholder="Mobile Number" />
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<p class="terms">
<a href="#signin" >View Terms</a>
<input type="button" value="Click me" class="green_btn" />
</p>
</form>
</section>
</div>
</div>
</body>
</html>
Clicking and transition from one page to another and every other thing seems to work fine. But whenever I click on any text field to fill up the form the CSS seems to get distorted and zoomed in. Any one else facing same issue with Phone Gap or know other way out for it.
————EDIT————
At startup when App starts the resoltion of view port is some
width : 500 ;
height : 794;
after clicking in input field its
width : 320 ;
height : 268;
is there no way I can use some
preventdefault() method
or if I can forcefully again change the viewport back to width:500 and height:794 ??
finally gotthe solution at some Random Url : http://uihacker.blogspot.in/2011/01/android-phonegap-scale-webview-to-fit.html
This is native code which seems to overrides everything from the WEBVIEW and giving it a consistent view with no zoom effect on clicking on any input value 🙂