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

发布于 2024-12-11 01:05:29 字数 2472 浏览 0 评论 0原文

下面三张图片展示了这个问题。之后我将详细介绍。

第一次运行，观察下一张图片的大小增加

一切都会根据选择而增长。

这就是它应该的方式是，一切都是正当的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>

原文

Below are three pictures showcasing the problem. I will go into more detail right after.

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

As you can see, something is causing the page to render improperly at first. I can't figure out what it could be. I've reordered the scripts, and the styles. No matter what I do, the first time you run the app the size of everything is very very small, and the only way to correct it is to tap the search bar.

What makes it worse, is that if you look at this in a browser, FireFox or Chrome, before deploying it to the device it renders perfectly. Only until it is on my device does it shrink on first use. And that is the kick, if I hit the home button and come back to my app, it's fine. If I force stop and launch my app, it's small again.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

跨年 2024-12-18 01:05:29

将此添加到您的标记之间：

<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

Add this to your between your <head> tag's:

<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">

Some further reading: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

回复收藏 0 原文

~没有更多了~