Bootstrap work on computer browser but doesn't work on mobile browser

Question

I use bootstrap for my site the toggle button work on computer browser but don't work on mobile browser

This is the code:

 <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/bootstrap-multiselect.css">
    <link href="css/bootstrap-select.min.css" rel="stylesheet" />
    <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://rawgit.com/trentrichardson/jQuery-Timepicker-Addon/master/dist/jquery-ui-timepicker-addon.min.css">
    <link href="css/lightbox.css" rel="stylesheet" />
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"  />

    <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar4">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          <a class="navbar-brand" href="main.php"><img src="img/t-square-logo-Final.png" alt="T-square" class="tslogo"/></a>
        </div>
        <div id="navbar4" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="main.php">Home</a></li>
          <li><a href="dms.php">DMS</a></li>
          <li><a href="main.php?action=backup">Backup</a></li>
          <li><a href="logout.php">LogOut</a></li>
        </ul>
      </div>
      </div>
    </nav>

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

I try to do like here But i stil have the same problem

Any one can help to solve my problem ??

If you already have the correct meta viewport added then can you post your entire code so we can see exactly what is going on — HisPowerLevelIsOver9000, May 24 '17 at 12:23
@HisPowerLevelIsOver9000 i solve my problem by changing the file bootstrap.min.js to bootstrap.js — mohamad mohamad, May 24 '17 at 12:30

score 4 · Answer 1 · answered May 24 '17 at 12:20

4

Add this to the header

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

answered May 24 '17 at 12:20

Dilip Belgumpi

658
4
13

thank you for your answer but i have this code in my header – mohamad mohamad May 24 '17 at 12:22

score 1 · Accepted Answer · answered May 24 '17 at 12:24

1

Your script: bootstrap.min.js is not loaded. When i delete this file in my project the toggle buttons stops working.

Can you verify if your file is loaded properly?

answered May 24 '17 at 12:24

Peter Bode

222
1
9

This. Sometimes a .min file doesn't exist just because IntelliSense gives a suggsetion for it. – Xariez May 24 '17 at 12:25
@Xariez And that why i don't use code completion ;) – Peter Bode May 24 '17 at 12:28
@Xariez i solve my problem by changing the file bootstrap.min.js to bootstrap.js – mohamad mohamad May 24 '17 at 12:30
1

Got to admit though, it's real handy sometimes ;) Anyhow, glad you got it fixed, should accept this as an answer so we know it's fixed! @mohamadmohamad – Xariez May 24 '17 at 12:43

Bootstrap work on computer browser but doesn't work on mobile browser

2 Answers2