Databases
StackOverflow2013
Postsdbo
POResponsive design on mobile scaling width incorrectly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive design on mobile scaling width incorrectly
    text
    copied!<p><strong>Edit:</strong> Found the answer, see my answer below.</p> <hr> <p>I was testing the waters with different responsive grid frameworks which I would integrate into my website in the future.</p> <p>I started off with Bootstrap (big following, updated often), but have came across a problem when testing it on Mobile devices.</p> <p>First I tried it via <a href="http://screenqueri.es" rel="nofollow">http://screenqueri.es</a> - everything looked fine, then tried it on my iPhone / iPad - again everything looked fine.</p> <p>I then asked my friend to try on his Samsung GT I9000 Galaxy S and it's pretty broken.</p> <hr> <p>This first image is how it looks on iPhone / iPad / Browser window: <a href="http://imgur.com/o3cVX" rel="nofollow">http://imgur.com/o3cVX</a></p> <p>The next image is from Adobe Device Manager, this is how it looked on my friends phone: <a href="http://imgur.com/kd47G" rel="nofollow">http://imgur.com/kd47G</a></p> <p>Notice how the rule at the top (under the help button) stays within the constraints of the screen, but the box below seems to wonder off screen.</p> <p>I'm using <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code> to ensure devices render the page properly.</p> <p>Here's my HTML:</p> <pre><code>&lt;div class="container"&gt; &lt;div class="row-fluid&gt; &lt;div class="span9&gt;&lt;/div&gt; &lt;div class="span3&gt;Help button is here&lt;/div&gt; &lt;/div&gt; &lt;div class="row-fluid&gt; &lt;div class="span6&gt;&lt;/div&gt; &lt;div class="span6&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The CSS is simply: <a href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="nofollow">http://twitter.github.com/bootstrap/assets/css/bootstrap.css</a> + <a href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="nofollow">http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css</a></p> <p>Both parts of the page are written exactly the same, yet display differently.</p> <p>It can be solved using a fixed width for this device specifically, but I'd rather have something that works for all devices - as well I noticed Bootstrap doesn't have this problem on their docs, so must be something I'm missing / doing wrong.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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