Databases
StackOverflow2013
Postsdbo
POSetting fixed width for mobile website doesn't adjust when switching to landscape orientation on Android (jQuery Mobile, HTML5)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSetting fixed width for mobile website doesn't adjust when switching to landscape orientation on Android (jQuery Mobile, HTML5)
    primarykey
    data
    text
    <p>The meta viewport tag:</p> <pre><code>&lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes"&gt; </code></pre> <p>Here is the body:</p> <pre><code>&lt;body&gt; &lt;div data-role="page" id="Index"&gt; &lt;h2&gt;Section&lt;/h2&gt; &lt;h4 id="Article1"&gt;Article1&lt;/h4&gt; &lt;h4 id="Article2"&gt;Article2&lt;/h4&gt; &lt;h4 id="Article3"&gt;Article3&lt;/h4&gt; &lt;div id="Content"&gt; &lt;div id="TableDiv"&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;Column 1&lt;/th&gt; &lt;th&gt;Column 2&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Value 1&lt;/td&gt; &lt;td&gt;Value 2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Value 3&lt;/td&gt; &lt;td&gt;Value 4&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_(large).gif/200px-Rotating_earth_(large).gif"/&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>I want the user to have the option of zooming. However, zooming can collapse the content, as I'm using percentages for the CSS. In order to keep the content static, with zooming, I set the width of the page to the clientWidth, in JavaScript:</p> <pre><code>$(document).ready(function() { $("#Index").css("width", document.documentElement.clientWidth); }); </code></pre> <p>The requirements are:</p> <ul> <li>Zooming (pinching) enabled</li> <li>Content should not collapse during zooming</li> <li>Width of content responds appropriately when changing screen orientation</li> </ul> <p>The width adjusts appropriately when switching orientation on iOS. On the Android OS, however, the width remains fixed and does not adjust to switching orientation.</p> <p>If I don't set the width, orientation is fine, but the content will collapse when zooming. Can I use the orientationchange event to adjust the width or is their a superior method for satisfying all the above requirements?</p> <p>Thank you very much.</p> <p><strong>Update</strong></p> <p>Let me ask this question in another way: In the meta "viewport" tag, the width is the device-width and I'm allowing the user to scale. I want to keep the layout viewport fixed (see this link for an explanation -- <a href="http://www.quirksmode.org/mobile/viewports2.html" rel="nofollow">http://www.quirksmode.org/mobile/viewports2.html</a>). That is, when the user zooms, I don't want the content to flow. Is there some CSS or media query solution I can use that would allow content to be set to the device-width in both portrait and orientation modes?</p> <p>Thank you.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser717236
    1. USuser717236
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COI'm not 100% sure what you're asking but here is a link to a SO answer I gave a while ago describing how to mess with the `viewport` tag when the browser re-sizes (e.g. orientation-change): http://stackoverflow.com/questions/6448465/jquery-mobile-device-scaling/6457261#6457261
      singulars
      1. POSetting fixed width for mobile website doesn't adjust when switching to landscape orientation on Android (jQuery Mobile, HTML5)
      1. USJasper
    2. COThank you very much for your response. I'm sorry if I wasn't clear. I'm looking for the best solution for a site with zooming, content uncollapsable when zooming, and orientation works as expected. The link you provided looks very promising, thank you. I'll try it out and report back. Thank you for your help, Jasper.
      singulars
      1. POSetting fixed width for mobile website doesn't adjust when switching to landscape orientation on Android (jQuery Mobile, HTML5)
      1. USuser717236
    3. COI tried your solution, but it doesn't appear to have any affect at all in the Android Emulator SDK. Thank you for your help, though.
      singulars
      1. POSetting fixed width for mobile website doesn't adjust when switching to landscape orientation on Android (jQuery Mobile, HTML5)
      1. USuser717236
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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