CODEWITHSUNDEEP
androidhtmlcsswordpressjquery-mobile
user1772571
user1772571

Reputation: 73

Website doesn't fit full screen on the mobile screen

When I test my development website on any Android mobile phone, the website doesn't fit full screen on the mobile screen. Attached is the snapshot. I' am just trying to make it mobile friendly.

I' am using wordpress with Twitter Boostrap to make my website. On my head tag, I have few meta tags that I found on the Internet for mobile friendly websites. Please note that this is not a responsive website.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1">

Please help?

Android Mobile Device, Site not fully fitting to the mobile screen size

Upvotes: 2

Views: 8397

Answers (4)

yogibear
yogibear

Reputation: 51

If you were designing a responsive site, but want to "fix" the width of the site in mobile i.e. 800px max width, I found that my only solution was to update the initial scale size. What worked nice for me was something like this, notice the "initial-scale" value:

<meta name="viewport" content="width=device-width, initial-scale=0.4">

Hope this helps someone!

Upvotes: 2

giorgos
giorgos

Reputation: 398

I know it's an old question but since it shows up in google I thought I'd share the solution I came up with, in case anyone else needs it:

If your website isn't responsive, you don't need the extra meta tags at the header. Try to remove them and it should work as expected.

Upvotes: 0

but like
but like

Reputation: 193

Make sure you're using the responsive classes included with Bootstrap in order to allow for design within the Bootstrap framework. In Bootstrap, all content is on a 12 "column" grid, and then split up based on that grid.

In Bootstrap 2.x

<div class="container">
  <div class="row">
    <div class="span6">
      Content here
    </div>
    <div class="span6">
      Content here
    </div>
  </div>
</div>

will produce two divs that span the width of the page.

In Bootstrap 3, they changed their class names slightly to account for different window sizes. The same example, provided you're on a mobile, device would be:

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      Content here
    </div>
    <div class="col-xs-6">
      Content here
    </div>
  </div>
</div>

You can remove responsiveness in Bootstrap 3 by following these steps: http://getbootstrap.com/getting-started/#disable-responsive

More information can be found here: http://getbootstrap.com/css/#grid

Upvotes: 0

Rafael Staib
Rafael Staib

Reputation: 1226

I have had recently the same issue on tablets/phones and fixed that with the following snippet.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    @-webkit-viewport { width: device-width; }
    @-moz-viewport { width: device-width; }
    @-ms-viewport { width: device-width; }
    @-o-viewport { width: device-width; }
    @viewport { width: device-width; }
</style>
<script>
    // Important for windows phone 8
    if (navigator.userAgent.match(/IEMobile\/10\.0/))
    {
        var msViewportStyle = document.createElement("style");
        msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
        document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
    }
</script>

Upvotes: 0

Related Questions