CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapmobile
Nate
Nate

Reputation: 553

Bootstrap not scaling properly on mobile devices

I've been developing a website in Rails for a local college as a side project for the past few weeks. It's my first production site in Rails and using Bootstrap to speed development. The website looks fine and all is working great except when I try to access the website from a mobile device. When you first load a page the page appears zoomed in. I'm allowing user-scaling so it's not that big of an issue, just an annoying little quirk I was hoping to get rid of.

It only happens when the page is initially loaded in a vertical orientation. If the page is loaded horizontally it's fine.

Here are my meta tags

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">

Here are some pictures since I'm not overly sure I'm being clear.

Vertical Orientation: https://i.sstatic.net/Cifzw.jpg

Horizontal Orientation: https://i.sstatic.net/2Dxu2.jpg

The outcome is the same on my Galaxy S3, an iPhone 5C, and an iPhone 5S

Upvotes: 15

Views: 16619

Answers (4)

richie
richie

Reputation: 18648

I faced the same issue.

I had the container width in the css as;

.container{
  width:640px
}

Changing width to max-width worked for me.

Upvotes: 0

Wadih M.
Wadih M.

Reputation: 13452

Winnyboy5's solution probably worked for you because you were not using the grid properly, but note that it's hard coding the size and if using a bigger screen, it won't adjust accordingly to take the space available, defeating the purpose of bootstrap.

To make the viewport work as it's supposed to on mobiles, you have to make sure you have the needed the container div wrapping everything:

<div class="container">
Your other elements go in here
</div>

OR:

<div class="container-fluid">
Elements here
</div>

The only difference with "fluid" container is that it will take the entire space.

Then adding this to your head will work on mobiles:

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

Upvotes: 5

winnyboy5
winnyboy5

Reputation: 1516

The inner elements of the grid may have a fixed width more than the mobile screen size. Check the CSS of the elements to find the one with the overflowing width.

You can use media queries to fix the width issue. Like below

@media (max-width: 320px) {
.element {
      width: 90%;   
     }
}

Upvotes: 3

edudepetris
edudepetris

Reputation: 714

Make sure you add:

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

to your <head>.

Fit the size of browser like a Galaxy S3 horizontal, it looks good?

Upvotes: 26

Related Questions