html - <meta name="viewport" content="width=device-width, initial-scale=0" /> not working -
i'm making responsive website bootstrap 3, , works when resize browser. when open website mobile (nokia lumia 920 internet explorer), not responsive @ all. bootstrap columns not working, breakpoints not working. i've googled it, changing breakpoints did not help. here 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 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) , (max-width: $screen-md-max) { } /* small devices, tablets */ @media (min-width: $screen-sm-min) , (max-width: $screen-sm-max) { } /* small devices, phones */ @media (max-width: $screen-xs-max) { } @-ms-viewport{ width: device-width; }
please, me! thank you!
you need give initial-scale
1.
<meta name="viewport" content="width=device-width, initial-scale=1">
Comments
Post a Comment