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