プロジェクトを実装するために、PhoneGapをJQueryMobileおよびHTML要素と一緒に使用しています。
<!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が歪んでズームインしているように見えます。PhoneGapで同じ問題に直面している人や、他の方法を知っている人はいます。
- - - - - - 編集 - - - - - -
アプリが起動するときの起動時のビューポートの解像度はいくつかあります
width : 500 ;
height : 794;
入力フィールドをクリックした後、
width : 320 ;
height : 268;
私がいくつかを使用できる方法はありませんか
preventdefault() method
または、ビューポートを幅：500と高さ：794に強制的に戻すことができる場合は??