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

Tra*_*vis 17 javascript jquery jquery-mobile

我正在使用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>
Run Code Online (Sandbox Code Playgroud)

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

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

谢谢!

Ale*_*lex 35

尝试将其添加到头部

<head>
.....
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
Run Code Online (Sandbox Code Playgroud)

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


小智 7

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

jquerymobile.com/test/


Mis*_*ded 0

可能和你的CSS有关系。检查你的<body>宽度和高度。

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

进一步阅读:

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