Question

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

enter image description here

这个的源代码是

<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的小提琴链接是 http://jsfiddle.net/jsfiddle_one/mBBYf/

非常感谢您的帮助。很抱歉，如果您无法看到屏幕截图，只需展开并折叠小提琴上的输出，您就会理解我的意思。

Answer 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之前关闭标题并像这样启动data-role =“content”div

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

Answer 2

添加课程＆＃34; ui-responsive＆＃34;在ui-grid-b之后。这将使所有这些文本元素堆叠在彼此之上

JQuery移动元素不能从纵向模式转换为横向模式

2 个答案: