diff --git a/docs/pages/docs-pages.html b/docs/pages/docs-pages.html index 9254be00..0fb3210a 100644 --- a/docs/pages/docs-pages.html +++ b/docs/pages/docs-pages.html @@ -35,6 +35,9 @@ <html> <head> <title>Page Title</title> + + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> @@ -46,6 +49,8 @@ </body> </html> + +

Note that you should also include a meta viewport tag in the head to specify how the browser should display your page zoom level and dimensions. If this isn't set, many mobile browsers will use a "virtual" page width around 900 pixels to make it work well with exisitng desktop sites but the screens may look zoomed out and too wide. By setting the content="width=device-width, initial-scale=1 in the code example above, the width will be set to the pixel width of the device screen. These settings do not disable the user's ability to zoom the pages which is nice from an accessibility perspective. There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed a a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library.

Inside the <body> tag, each view or "page" on the mobile device is identified with an element (usually a div) with the data-role="page" attribute:

@@ -77,6 +82,9 @@ <html> <head> <title>Page Title</title> + + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>