Question

以下是展示问题的三张图片。我会马上详细介绍。

First run, watch the size increase in the next picture

Everything grew. The header text and size of the controls upon selection

This is the way it should be, everything is the proper size

正如您所看到的，有些事情导致页面首先呈现不正确。我无法弄清楚它可能是什么。我重新排序了脚本和样式。无论我做什么，第一次运行应用程序时，所有内容的大小都非常小，纠正它的唯一方法是点击搜索栏。

更糟糕的是，如果您在浏览器，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>

Answer 1

将此添加到您的<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

首次运行的Phonegap / jQM应用程序具有非常小的文本和控件

1 个答案: