<meta name=“viewport” content=“width=device-width, initial-scale=0” /> not working
Question
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!
2 answers
solution1
3 2014-09-10 14:31:59
您需要将initial-scale为1 。
<meta name="viewport" content="width=device-width, initial-scale=1">
solution2
-1 2019-09-11 09:57:31
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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
What does this tag (<meta name=“viewport” content=“width=device-width, initial-scale=1”>) do?
Meta viewport : width=device-width or initial-scale=1 or both
Viewport width=device-width, initial-scale=1 not giving me full width
Is width=device-width redundant alongside initial-scale=1?
meta tag “viewport” content=“width=device-width” not working
Table on HTML page takes much more width than div with using <viewport "width=device-width initial-scale=1.0">
Using viewport width=device-width, initial-scale=1, maximum-scale=1 doesnt fit my page to my phone screen
meta name="viewport" content="width=device-width" Is not working with Kendo UI Mobile
meta viewport: can not use “width=640” with “initial-scale=1.0”?
iPhone viewport meta tag width=device-width not working
Related Tags