CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Travis
Travis

Reputation: 171

jQuery Mobile page width is too wide...

I am working on creating pages for mobile devices with jQuery Mobile.

Here is the basic page template I am using:

<!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>

When I try to view this on a mobile phone (Samsung Galaxy, iPhone, etc.) the page width is far too large (forcing scrolling on small resolution devices or very small text on larger resolution devices.)

Can anyone tell me what I am doing wrong?

Thank-you!

Upvotes: 17

Views: 17353

Answers (5)

Alex
Alex

Reputation: 1304

try adding this in the head

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

also one <div data-role="content"> ... </div> is enough

Upvotes: 35

Todd Parker
Todd Parker

Reputation: 71

You need to add a meta viewport tag to your head to set the page width to device width. It's covered in the blog posts at jquerymobile and updated docs:

jquerymobile.com/test/

Upvotes: 7

Jason Gennaro
Jason Gennaro

Reputation: 34855

This might have something to do with <div data-role="content">.

Not sure you can have two of those on a page. 

<div data-role="content"> 

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

    </div>

The docs don't suggest there could be more than one: http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html

Upvotes: 0

andyb
andyb

Reputation: 43823

I think the multiple data-role="content" are causing a styling issue. The Anatomy of a Page does not use multiple content data-role and the boiler plate template does not either.

Upvotes: 1

Misguided
Misguided

Reputation: 1302

It probably has something to do with your CSS. Check your <body>'s width and height.

For best results, you should use CSS media queries and check for screen resolution, thus having a different style depending on the user's screen.

For further reading:

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

Upvotes: 0

Related Questions