Question

我有一些基于jquery.mobile的页面;当我旋转设备（WP8 / IE10和iPad2）时，页面会以不正确的宽度重新渲染。

在iPad2上，如果我通过单击文本框然后再次单击它来激活键盘，则会出现同样的情况。

我的网页代码（已呈现）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Martin Robins" />
  <title>Do stuff</title>
  <link href="../Content/jquery.mobile.structure-1.3.1.css" rel="stylesheet" />
  <link href="../Content/jquery.mobile-1.3.1.css" rel="stylesheet" />
  <link href="../Content/jquery.mobile.theme-1.3.1.css" rel="stylesheet" />
</head>
<body>
  <form method="post" action="./" id="form">
    <script src="../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.mobile-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).bind("mobileinit", function () {
        $.mobile.ajaxEnabled = false;
        $.mobile.linkBindingEnabled = false;
      });
    </script>

    <div data-role="page" id="logon" data-theme="c">
      <div data-role="header" data-position="fixed">
        <h1>Select location</h1>
      </div>
      <div data-role="content">

        <div data-role="fieldcontain">
          <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Title</legend>
            <input name="ctl00$FormContentPlaceHolder$Prefix" type="text" id="FormContentPlaceHolder_Prefix" style="text-transform: capitalize;" />
          </fieldset>
        </div>
        <div data-role="fieldcontain">
          <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Forenames</legend>
            <input name="ctl00$FormContentPlaceHolder$Forenames" type="text" vcard_name="vCard.FirstName" id="FormContentPlaceHolder_Forenames" style="text-transform: capitalize;" />
          </fieldset>
        </div>                  
      </div>
    </div>
  </form>
</body>
</html>

注意：有些内容已被遗漏。我正在使用ASP.NET，因此还加载了一些ASP.NET AJAX脚本。

有什么建议吗？

Answer 1

可能我认为这是元标记问题，您可以添加以下元标记并检查是否有效。

<meta name="viewport" content="width=device-width">

jquery.mobile：orientation导致宽度错误

1 个答案: