jQuery移动页面宽度太宽…

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (26)

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

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

<!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等)上查看这个页面时,页面宽度太大了

有人能告诉我我做错了什么吗?

提问于
用户回答回答于

您需要向头部添加一个metaviewport标记,以将页面宽度设置为设备宽度。

用户回答回答于

试着在头部加上这个

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

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

扫码关注云+社区

领取腾讯云代金券