JQuery 移动元素不会从纵向模式回流到横向模式答案

【问题标题】：JQuery mobile elements not reflowing from portrait to landscape modeJQuery 移动元素不会从纵向模式回流到横向模式
【发布时间】：2013-09-24 01:28:54
【问题描述】：

我有一个简单的用例，我正在为客户创建一个表单来更新他们的个人资料信息。我正在使用 jquery 手机。所以我有几个字段，比如电子邮件电话号码。唯一的问题是我的电话号码分为 3 个字段 Code Code、Area code 和 number。我创建了 3 个文本字段来使用 Jquery Mobile Grid 捕获这些项目中的每一个，当我从纵向模式切换到设备的横向模式时，唯一的问题是元素不会重排。正如您从下面的屏幕截图中看到的那样，电话号码字段不会像电子邮件标题字段那样重排。请参阅随附的屏幕截图。

这个的源代码是

<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
         <h3>
            Header
        </h3>

        <div data-role="fieldcontain">
            <label>Telephone number</label>
            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <input name="" id="textinput4" placeholder="area code" value="" type="text">
                </div>
                <div class="ui-block-b">
                    <input name="" id="textinput5" placeholder="c code" value="" type="text">
                </div>
                <div class="ui-block-c">
                    <input name="" id="textinput6" placeholder="number" value="" type="text">
                </div>
            </div>
        </div>
        <div data-role="fieldcontain">
            <label for="textinput1">Email</label>
            <input name="" id="textinput1" placeholder="" value="" type="email">
        </div>
        <div data-role="fieldcontain">
            <label for="textinput8">Title</label>
            <input name="" id="textinput8" placeholder="" value="" type="text">
        </div>
    </div>
    <div data-role="content"></div>
    <div data-theme="a" data-role="footer" data-position="fixed">
         <h3>
            Footer
        </h3>

    </div>
</div>

这个的 JS fiddle 链接是 http://jsfiddle.net/jsfiddle_one/mBBYf/

您的帮助将不胜感激。抱歉，如果您看不到屏幕截图，只需展开并折叠小提琴上的输出，您就会明白我的意思。

【问题讨论】：

如果您删除 <div data-role="fieldcontain">，它们会按照应有的方式重排，只需很少的 CSS 调整。 jsfiddle.net/Palestinian/dHabx

标签： jquery css jquery-mobile responsive-design media-queries

【解决方案1】：

您必须添加 jquery mobile 所需的元标记以使其响应和整洁。

  <!DOCTYPE html> 
  <html> 
  <head> 
<title>My Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

  </head>

将此添加到 html 的顶部。带有设备宽度和初始比例的元标记更重要

---- 编辑 -----

你需要在fieldcontain div之前关闭header并像这样启动data-role="content" div

http://jsfiddle.net/mBBYf/1/

【讨论】：

您好，manu，感谢您的意见，但是这已经添加了，但它仍然不起作用
我已经编辑了它 p[lease check.您没有关闭标题 div，这就是问题所在。请检查更新的小提琴
嗨 Manu，我想你还没有理解我的要求，让我们在电话号码和电子邮件两个字段中填写。当我减小页面大小时，电子邮件标签位于文本字段上方。当我增加宽度时，电子邮件和文本字段在同一行。电话字段不会发生这种情况，电话标签始终位于 3 个文本字段的顶部，即基本上是一种响应式设计，其中表单元素是基于视口宽度重排的标签

【解决方案2】：

在 ui-grid-b 之后添加“ui-responsive”类。这将使所有这些文本元素相互堆叠

【讨论】：