Phone Gap 中的输入字段表单问题
Posted
技术标签:
【中文标题】Phone Gap 中的输入字段表单问题【英文标题】:Issue with input fields forms in Phone Gap 【发布时间】:2012-05-07 23:13:45 【问题描述】:我正在使用 PhoneGap 以及 JQuery Mobile 和 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>
单击并从一个页面切换到另一个页面,其他所有操作似乎都可以正常工作。但是,每当我单击任何文本字段以填写表单时,CSS 似乎都会被扭曲和放大。任何其他人面临与 Phone Gap 相同的问题或知道其他出路。
------------编辑------------
App启动时视口的分辨率是多少
width : 500 ;
height : 794;
点击输入框后
width : 320 ;
height : 268;
有没有办法我可以使用一些
preventdefault() method
或者如果我可以再次强制将视口改回 width:500 和 height:794 ??
【问题讨论】:
【参考方案1】:删除 target-densityDpi=device-dpi 会停止我的 HTC Evo 上的缩放。更深入地了解视口here。
【讨论】:
【参考方案2】:终于在一些随机网址上找到了解决方案:http://uihacker.blogspot.in/2011/01/android-phonegap-scale-webview-to-fit.html
这是本机代码,它似乎覆盖了 WEBVIEW 中的所有内容,并为其提供一致的视图,在单击任何输入值时没有缩放效果:)
【讨论】:
以上是关于Phone Gap 中的输入字段表单问题的主要内容,如果未能解决你的问题,请参考以下文章
ios 中 App Store 'INVALID BINARY' 中的 Phone Gap 应用商店
iPhone JQuery:如何使用 iPhone 中的 Jquery Mobile + phone gap 在 iPad 中实现拆分视图