Question

我正在使用jQuery Mobile为移动设备创建页面。

以下是我使用的基本页面模板：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Test Page</title>

  <link rel="stylesheet" 
    href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js">
    </script>  
</head>

<body>
  <div data-role="page">    
    <div data-role="header" data-theme="b">
      <h1>Page Title</h1>
    </div>

    <div data-role="content">         
      <div data-role="content" data-theme="a">
        Page Content
      </div>
    </div>
  </div>
</body>

</html>

当我尝试在手机（三星Galaxy，iPhone等）上查看时，页面宽度太大（强制在小分辨率设备上滚动或在较大分辨率设备上滚动非常小的文本。）

谁能告诉我我做错了什么？

感谢 - 你！

Answer 1

尝试在头部添加此内容

<head>
.....
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

还有一个<div data-role="content"> ... </div>就足够了

Answer 2

您需要在头部添加元视口标记，以将页面宽度设置为设备宽度。它包含在jquerymobile的博客文章和更新的文档中：

jquerymobile.com/test/

Answer 3

我认为多个data-role="content"会导致样式问题。 Anatomy of a Page不使用多个内容 data-role，boiler plate模板也不使用。

Answer 4

它可能与您的CSS有关。检查<body>的宽度和高度。

为了获得最佳效果，您应该使用CSS媒体查询并检查屏幕分辨率，因此根据用户的屏幕具有不同的样式。

进一步阅读：

http://www.w3.org/TR/css3-mediaqueries/

Answer 5

这可能与<div data-role="content">有关。

不确定页面上是否有两个。

<div data-role="content"> 

        <div data-role="content" data-theme="a">
            Page Content
        </div>

    </div>

文档不建议可以有多个：http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html

jQuery Mobile页面宽度太宽......

5 个答案: