CODEWITHSUNDEEP
jquerycsstwitter-bootstrapgrid
user5210131
user5210131

Reputation:

bootstrap loading wrong grid on mobile

I designed a webpage using bootstrap to make it responsive. when I check the result on my PC everything looks fine, but when I uploaded it on server the grid system has probems. when I open it on mobile, instead of loading col-xs-* it loads col-sm-* .its funny when I inspect the page by chrome, in the chrome top nav bar i see the width is 600px, but it is loading sm instead of xs.

to give more details:

  1. when I inspect locally, it loads xs abd everything is designed as expected but online it has the problems. (local and online views differ a lot)
  2. I have added jquery before bs in all pages headers.
  3. I have a main page that contains only an iframe and the other pages are loaded in this iframe. i have added jaquey and bs on the page containing this iframe too.
  4. all pages have container class as the main parent
  5. when i open the web page by chrome and resize chrome to smallest possible, it works well (xs is working), but using Inspect or real devices it has the problem.
  6. chrome shows this error : Failed to parse SourceMap: http:// project address on server/css/bootstrap.min.css.map (i have not added such library to my project)
  7. even media query has problems, as I mentioned the width im testing is 600px, but mediaquery max-width:716px doenst work, while min-width: 716px is workink instead of that!

I seriously dont know whats happening!

the main iframe code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
    <script src="js/jquery-2.2.0.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<body style="background-color: gray">
    <iframe src="login.html" frameborder="0" id="theMainIFrame" style="width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; right: 0; bottom:0"></iframe>
</body>
</html>

one of the parts having problem :

<div class="container-fluid">
  <div class="row" style="text-align: center">
    <div class="col-xs-12 col-xs-push-0 col-sm-12 col-sm-push-0 col-md-6 col-md-push-3 col-lg-4 col-lg-push-4" style="background-color: #bababa">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#Login">Login</a></li>
        <li><a data-toggle="tab" href="#Register">Register</a></li>
      </ul>
    </div>
  </div>
</div>

I would be grateful if anyone could help me.

Upvotes: 1

Views: 376

Answers (1)

user5210131
user5210131

Reputation:

I found the solution ... surprisingly just adding the following code to my iframe container page solved everything.

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

Upvotes: 1

Related Questions