PhoneGapとJQuery MobileおよびHTML要素を使用してプロジェクトを実装しています。Phone Gapの入力フィールドのフォーム
<!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>
1つのページから別のページへのクリックと移行はすべてうまくいくようです。しかし、テキストフィールドをクリックするたびに、CSSが歪んで拡大されているように見えます。Phone Gapで同じ問題に直面しているか、他の方法を知っています。
------------ ------------ EDIT
起動時にアプリケーションの起動時にビューポートのresoltionは、いくつかの
あるwidth : 500 ;
height : 794;
入力フィールドをクリックした後、その
width : 320 ;
height : 268;
は、私はいくつかの
使用することができます方法はありませんまた、強制的にビューポートを幅:500と高さ:794に戻すことができますか?
もし私がそれを行うなら、それはレイアウトを同じ方法で示していて、それは私がチェックしたときにWebkitブラウザにあるようです –