在 jQuery Mobile 中，如果手机倾斜到横向，如何在编辑时使文本输入全屏显示？
Posted
技术标签:
【中文标题】在 jQuery Mobile 中，如果手机倾斜到横向，如何在编辑时使文本输入全屏显示？【英文标题】：In jQuery Mobile, how do I make text inputs go full screen while editing if the phone is tilted to landscape? 【发布时间】：2012-09-28 13:01:58 【问题描述】：我在 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>
这是我想说的一个很好的例子。这是消息应用处于纵向模式时的文本输入。
现在当我将手机倾斜到横向时，文本输入框会变成这样的全屏：
这就是我想要实现的目标。
【问题讨论】：
呃，我不知道这会有什么帮助，但你去吧。 其实我的意思是你的标题... 更新了完整的 index.html 页面。 好的 :) 我会发布答案...等一下 :P 【参考方案1】：在标题中添加以下内容：
<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>
试一试。这应该正常工作。
【讨论】：
我试过了，不幸的是，它似乎与以前没有任何不同。我还用屏幕截图更新了我的问题。 哦... :O... 等等，我会在我的环境中测试你的代码 :)。顺便说一句，您使用的是什么版本的 android？ 我使用的是 ICS 4.0.4 :) PhoneGap v2.1.0、jQuery Mobile v1.2.0、jQuery v1.8.2。 好的 :)。嘿，伙计，您可以尝试我重新编辑的代码（仅更改标题）吗？我真的不确定，您使用的是自定义主题吗？以上是关于在 jQuery Mobile 中，如果手机倾斜到横向，如何在编辑时使文本输入全屏显示？的主要内容，如果未能解决你的问题，请参考以下文章
在jquery mobile中打开面板时如何防止页面被拖动？