CODEWITHSUNDEEP
htmlmobileviewportmetadevice-width
Alex
Alex

Reputation: 139

<meta name="viewport" content="width=device-width, initial-scale=0" /> not working

I'm making responsive website with bootstrap 3, and it works when I resize my browser. But when I open website from mobile (Nokia lumia 920 internet explorer), it is not responsive at all. Bootstrap columns are not working, breakpoints are not working. I've googled it, changing breakpoints did not help. Here is my html 

<!DOCTYPE html>
<html class="no-js" data-placeholder-focus="false">
    <head>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0" /> 
    <meta name="mobileoptimized" content="0" />
    <title>index</title>
    <meta name="description" content="" /> 
    <meta name="keywords" content="" /> 
    <meta name="author" content="Constr" /> 

    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/owl.carousel.css"> 
    <link rel="stylesheet" href="css/animate.css"> 
    <link rel="stylesheet" href="css/custom.css">  

    <link rel="shortcut icon" href=""> 
    <link rel="apple-touch-icon" href=""> 
    <link rel="apple-touch-icon" sizes="72x72" href="">
    <link rel="apple-touch-icon" sizes="114x114" href=""> 

      <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->

    </head>

Here is my css, I'm using SASS

$screen-lg-min: 1200px;
$screen-md-max: 1199px;
$screen-md-min: 992px;
$screen-sm-max: 991px;
$screen-sm-min: 768px;
$screen-xs-max: 767px;

@media (min-width: $screen-lg-min) {

}

/* Medium Devices, Desktops */
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {

}

/* Small Devices, Tablets */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {

}

/* Extra Small Devices, Phones */ 
@media (max-width: $screen-xs-max) {

}
@-ms-viewport{
    width: device-width;
}

Please, help me! Thank you!

Upvotes: 1

Views: 22500

Answers (2)

David Gustavo
David Gustavo

Reputation: 1

You need to put this code right after <meta name>.

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">

Example:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">

Upvotes: -1

Sebsemillia
Sebsemillia

Reputation: 9486

You need to give the initial-scale a 1.

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

Upvotes: 3

Related Questions