Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Mobile Device Scaling
    text
    copied!<p>I am using JQuery Mobile and I am having trouble with the scaling from my browser to my iPhone. </p> <p>When I load it on a browser (safari) it shrinks and expands just fine. However when I load it on my iPhone it doesn't scale. It allows you to scroll left and right when it shouldn't.</p> <p>Is there something I am supposed to add to make it scale down on recognize that it's a mobile device. </p> <p>Here is my current html. </p> <p></p> <pre><code> &lt;head&gt; &lt;title&gt;Page Title&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="http://www.domain.com/css/jquery.mobile-1.0b1.min.css" /&gt; &lt;link rel="stylesheet" href="http://www.domain.com/css/base.css" /&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;body&gt; &lt;!-- Start of first page --&gt; &lt;div data-role="page"&gt; &lt;div data-role="header"&gt; &lt;div id="header"&gt; &lt;ul&gt; &lt;li&gt; &lt;div&gt;&lt;a href="logout.php"&gt;Logout&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li style="float:right;"&gt; &lt;div&gt;&lt;a href="new.php"&gt;New&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;h1 align="center"&gt;Title&lt;/h1&gt; &lt;/ul&gt; &lt;div id="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- /header --&gt; &lt;div id="stream"&gt; &lt;div id="stream_story"&gt; &lt;ul style="width:100%"&gt; &lt;li&gt; &lt;img src="" /&gt; &lt;/li&gt; &lt;li style="float:right;"&gt;&gt;&lt;/li&gt; &lt;li style="width:75%;margin-bottom:10px;margin-left:5px;"&gt;Content &lt;br/&gt;&lt;span&gt;Content&lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="clear"&gt;&lt;/div&gt; &lt;hr/&gt; &lt;/div&gt; &lt;!-- /content --&gt; &lt;/div&gt; &lt;!-- /page --&gt; &lt;/body&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload