下面是展示问题的三张图片。稍后我会详细介绍。
如您所见，最初是某些原因导致页面呈现不正确。我不知道它可能是什么。我重新排序了脚本和样式。无论我做什么，第一次运行该应用程序时，所有内容的大小都非常非常小，纠正它的唯一方法是点击搜索栏。
更糟糕的是，如果您在浏览器、FireFox 或 Chrome 中查看它，那么在将它部署到设备之前它会完美呈现。只有当它出现在我的设备上时，它才会在第一次使用时缩小。这就是踢球，如果我按下主页按钮并返回到我的应用程序，那很好。如果我强行停止并启动我的应用程序，它又变小了。
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Styles/jquery.mobile-1.0rc1.css" />
<script type="text/javascript" charset="utf-8" src="Scripts/phonegap-1.1.0.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript" src="Scripts/common.js"></script>
</head>
<body>
<div data-role="page" id="home" data-title="Search">
<div data-position="fixed" data-role="header">
<h1>
Search
</h1>
</div>
<div data-role="content">
<form action="#" method="POST">
<input id="search" type="search" placeholder="Search" />
<button type="submit" data-inline="true" data-icon="search" id="searchWikiMedia">
Search</button>
</form>
<div id="refineSearch">
<ul data-role="listview">
</ul>
<span id="error"></span>
</div>
</div>
<div data-position="fixed" data-role="footer">
</div>
</div>
<div data-role="page" id="result" data-title="Results">
<div data-position="fixed" data-role="header">
<a href="#home" data-transition="slide" data-direction="reverse">Search</a>
<h1>
</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
<h4>
</h4>
</div>
</div>
</body>
</html>
最佳答案
将此添加到您的 <head> 之间标签的:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
or simply
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
进一步阅读:https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
关于jquery - 首次运行的 Phonegap/jQM 应用程序具有非常小的文本和控件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7827711/