2

jQuery Mobile にテキスト入力があります。また、PhoneGap を使用してアプリケーションとしてパッケージ化しています。ただし、問題は、電話を横向きに傾けると、テキスト編集が全画面表示にならないことです。どうすればそれを行うことができますか？

<!DOCTYPE HTML>
<html>
<head>
    <title>My App</title>
    <script src="phonegap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="jqm/jquery.mobile.min.css" />
    <link rel="stylesheet" href="jqm/jquery.mobile.structure.min.css" />
    <link rel="stylesheet" href="jqm/jquery.mobile.theme.min.css" />
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jqm/jquery.mobile.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="myapp.js" type="text/javascript"></script>
</head>
<body>
    <div data-role="page">

        <div data-role="header" data-id="header" data-position="fixed" data-theme="c">
            <h1 style="text-align:left; margin: 10px;">My App</h1>
            <a href="settings.html" data-icon="gear" class="ui-btn-right" style="margin:1px;">Settings</a>
        </div><!-- /header -->

        <div data-role="content">
            <p>
                <label for="basic">Text Input:</label>
                <input type="text" name="status" id="status" value=""  />
            </p>
        </div><!-- /content -->

        <div data-role="footer" data-id="footer" data-position="fixed" data-theme="c">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html" data-icon="plus" class="ui-disabled">New Log</a></li>
                    <li><a href="logs.html" data-icon="refresh">Logs</a></li>
                    <li><a href="about.html" data-icon="info">About</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
    </div><!-- /page -->
</body>
</html>

これは私が言おうとしていることの良い例です。これは、メッセージング アプリが縦向きモードの場合のテキスト入力です。

ここに画像の説明を入力

電話を横向きに傾けると、テキスト入力ボックスは次のように全画面表示になります。

ここに画像の説明を入力

それが私が達成したいことです。

4

1 に答える 1

0

ヘッダーに次を追加します。

<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

したがって、ヘッダーは次のようになります。

<head>
    <title>My App</title>

<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

    <script src="phonegap.js" type="text/javascript"></script>

    <link rel="stylesheet" href="jqm/jquery.mobile.theme.min.css" />

    <link rel="stylesheet" href="jqm/jquery.mobile.structure.min.css" />

    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jqm/jquery.mobile.min.js" type="text/javascript"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="myapp.js" type="text/javascript"></script>
</head>

試してみてください。これは正常に動作するはずです。

于 2012-10-08T10:29:09.440 に答える