Приложение PhoneGap / JQM при первом запуске имеет очень маленький текст и элементы управления - PullRequest
Новая
       0

Приложение PhoneGap / JQM при первом запуске имеет очень маленький текст и элементы управления

1 голос
/ 20 октября 2011

Ниже три изображения, демонстрирующие проблему. Я подробно остановлюсь сразу после.

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>

1 Ответ

3 голосов
/ 20 октября 2011

Добавьте это к вашему тегу <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

...