Twitter Bootstrap Question posted in

Twitter Bootstrap 3 – wrong recognize size

I have this code:

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="visible-xs-block">visible-xs-block</div>
                <div class="visible-sm-block">visible-sm-block</div>
                <div class="visible-md-block">visible-md-block</div>
                <div class="visible-lg-block">visible-lg-block</div>
            </div>
        </div>
    </div>
</body>

</html>

When I run this on mobile, my phone recognise this as SM, but should as XS.
In this case, I can’t see mobile menu with hamburger (code not include) and when I have div with xs-12 and sm-6 it displays wrong.

On PC works everything.

How can I recognise phone (XS size) correctly ?

Tags:

3

Answers


  1. 0

    You have already tried with google chrome inspect? In the latests version you can select various device type and brand. In this way you can test at different resolution.
    The solution it’s not always correct, but is a good approximation.

    https://developer.chrome.com/devtools/docs/device-mode

    Login or Signup to reply.
  2. 0

    Put the meta tag in head section.

    <meta name="viewport" content="width=device-width, initial-scale=1">
    Login or Signup to reply.
  3. 0

    If the problem persist after adding:

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

    Try with

    <div class="hidden-lg hidden-md hidden-sm col-xs-12">visible-xs-block</div>

    instead of

    <div class="visible-xs-block">visible-xs-block</div>

    Anyways, your code was working fine for me.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search