Menu
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!
236
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
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
