Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-31 21:20:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #2780 from MauriceG/patch-13

Browse source 
docs: some corrections at Pages & Dialogs / Anatomy of a Page
This commit is contained in:
Todd Parker 2011-10-20 14:26:39 -07:00
commit efe1896b93
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/pages/page-anatomy.html
View file

@ -50,11 +50,11 @@
</code></pre>
<h2>Viewport meta tag</h2>
<p>Note above that there is a meta <code>viewport</code> tag in the <code>head</code> to specify how the browser should display the 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 viewport attributes to <code>content=&quot;width=device-width, initial-scale=1</code>, the width will be set to the pixel width of the device screen. </p>
<p>Note above that there is a meta <code>viewport</code> tag in the <code>head</code> to specify how the browser should display the 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 viewport attributes to <code>content=&quot;width=device-width, initial-scale=1&quot;</code>, the width will be set to the pixel width of the device screen. </p>
<pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; </code></pre>
<p>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. </p>
<p>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. </p>
<h2>Inside the body: Pages</h2>
<p>Inside the <code>&lt;body&gt;</code> tag, each view or "page" on the mobile device is identified with an element (usually a <code>div</code>) with the <code> data-role="page"</code> attribute:</p>
@ -80,7 +80,7 @@
<h2>Putting it together: Basic single page template</h2>
<p>Putting it all together, this is the standard boilerplate page template you should start with on a project. :</p>
<p>Putting it all together, this is the standard boilerplate page template you should start with on a project: </p>
<pre><code>
&lt;!DOCTYPE html&gt;
@ -153,7 +153,7 @@
&lt;/div&gt;&lt;!-- /header --&gt;
&lt;div data-role=&quot;content&quot;&gt;
&lt;p&gt;I&#x27;m first in the source order so I&#x27;m shown as the page.&lt;/p&gt;
&lt;p&gt;I&#x27;m the second in the source order so I&#x27;m hidden when the page load. I&#x27;m just shown, if a link that reference my ID is beeing clicked.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;#foo&quot;&gt;Back to foo&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;