Free Web Developer Tools
Advanced Search

Thread: viewport meta tag isn't working

    March 29th, 2017, 10:07 AM
    #1
  1. No Profile Picture
    markUK
    Registered User
    Devshed Newbie (0 - 499 posts)
    Join Date
    Mar 2017
    Posts
    1
    Rep Power
    0

    viewport meta tag isn't working

    Hey fellow devs,

    Is any of you willing to review my HTML ? I'm making my website responsive. Bootstrap and viewport meta tag both implemented but it isn't working.

    When I view the website on my phone, on which the size of the screen is same as iPhone 6, all I get is zoomed out full-size website. All the features that are available in mobile-mode aren't triggered.

    When I resize browser on my desktop to the size of phone's screen it all works nicely. But not on the phone.

    Code:
    <!DOCTYPE html>
<html lang="en">

<head>
	
	<title>Carlos Martinez's Official website</title>
	<meta charset="UTF-8">
	<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Bahiana|Gloria+Hallelujah" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1" >
<style>
body {
	padding-top: 40px;
	background-color: #002266;
}
* {
	padding: 0;
	margin: 0;
}
li {
	font-family: 'Bahiana', Verdana;
	font-size: 40px;
	
}
#paragraph {
	font-family: 'Gloria Hallelujah', Verdana;
	font-size: 38px;
	color: #00e6e6;
}
html {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
}
h3 {
	font-family: 'orbitron', sans-serif;
	font-size: 45px;
	color: #0066ff;
	font-weight: bold;
	margin-bottom: 50px;
}

span {
	text-shadow: 2px 2px red;
	font-size: 60px;
	color: #0066ff;
}
p {
	font-family: 'Gloria Hallelujah', sans-serif;
	font-size: 25px;
}
img {
	
	border: 15px inset navy;
	border-radius: 10px;
}
.jumbotron {
	background-color: transparent;
}

.footer {
	text-align: center;
}
.footer ul li {
	display: inline-block;
	list-style-type: none;
	padding-right: 10px;

}
#underdevelopment {
	width: 40px;
	height: auto;
	border: none;

}
.footer p {
	color: red;
}
#hover a:hover {
	color: #3333ff;
}
#highlight {
	color: #6699ff;
}
@media only screen and (max-width: 600px) {
	
img {
		width: 80%;
		border: 3px outset blue;
		height: auto;
}


}



</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav" id="hover">
	<li><a href="index.php" id="highlight">home</a></li>
	<li><a href="about.html">about me</a></li>
	<li><a href="my_work.html">my work</a></li>
	<li><a href="upcoming.php">upcoming events</a></li>
	<li><a href="contact.html">contact me</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
	<div class="container text-center">
	
		<h3>Welcome to <span>Carlos Martinez</span>'s website</h3>
		<div class="row">
		<div class="col-lg-6">
		<img src="https://scontent.flhr3-2.fna.fbcdn.net/v/t1.0-9/15965068_10154858290396354_1983436181302302499_n.jpg?oh=1774b17347d21394afb4d304ccafbb5e&oe=59465625" width="400" height="auto" /></div>
		<div class="col-lg-6">
		<p id="paragraph">Music is my lifestyle, music is in my blood, hope you enjoy the content and feel free leave a comment in the "upcoming events" section</p>
		</div>
	</div>
</div>
</div>
<div class="container">
<div class="footer">
	<ul>
		<li><img src="css/pics/underdevelopment.png" id="underdevelopment"></li>
		<li><p>This website is under development</p></li>
	</ul>
</div>

<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=11273342;
var sc_invisible=1;
var sc_security="e1a20e80";
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" + scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="site stats"
href="http://statcounter.com/" target="_blank"><img class="statcounter"
src="//c.statcounter.com/11273342/0/e1a20e80/1/" alt="site
stats"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
    2. March 30th, 2017, 06:25 PM
    #2
  2. No Profile Picture
    mjayt
    Registered User
    Devshed Newbie (0 - 499 posts)
    Join Date
    Jan 2017
    Posts
    11
    Rep Power
    0

    Give this a try

    I cleaned up the html a bit... you had an extra div that was making the body think it wasn't closed as well as a few other small things. It appears to respond okay when I test now. Hope that helps get you started.

    Matt


    Code:
    <!DOCTYPE html>
<html>

<head>
	
	<title>Carlos Martinez's Official website</title>
	
	<meta charset="UTF-8">
	
	<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Bahiana|Gloria+Hallelujah" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	
	<meta name="viewport" content="width=device-width, initial-scale=1" >
	
	<style>
	
		body {
			padding-top: 40px;
			background-color: #002266;
		}

		* {
			padding: 0;
			margin: 0;
		}

		li {
			font-family: 'Bahiana', Verdana;
			font-size: 40px;

		}

		#paragraph {
			font-family: 'Gloria Hallelujah', Verdana;
			font-size: 38px;
			color: #00e6e6;
		}

		html {

			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;

		}

		h3 {
			font-family: 'orbitron', sans-serif;
			font-size: 45px;
			color: #0066ff;
			font-weight: bold;
			margin-bottom: 50px;
		}

		span {
			text-shadow: 2px 2px red;
			font-size: 60px;
			color: #0066ff;
		}

		p {
			font-family: 'Gloria Hallelujah', sans-serif;
			font-size: 25px;
		}

		img {

			border: 15px inset navy;
			border-radius: 10px;
		}

		.jumbotron {
			background-color: transparent;
		}

		.footer {
			text-align: center;
		}

		.footer ul li {
			display: inline-block;
			list-style-type: none;
			padding-right: 10px;

		}

		#underdevelopment {
			width: 40px;
			height: auto;
			border: none;

		}

		.footer p {
			color: red;
		}

		#hover a:hover {
			color: #3333ff;
		}

		#highlight {
			color: #6699ff;
		}

		@media only screen and (max-width: 600px) {

		img {
			width: 80%;
			border: 3px outset blue;
			height: auto;
		}


		}

</style>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">

	<div class="container">
	
		<div class="header">
		
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			
		</div>
	
		<div class="collapse navbar-collapse" id="navbar-collapse">
		
			<ul class="nav navbar-nav" id="hover">
			
				<li><a href="index.php" id="highlight">home</a></li>
				<li><a href="about.html">about me</a></li>
				<li><a href="my_work.html">my work</a></li>
				<li><a href="upcoming.php">upcoming events</a></li>
				<li><a href="contact.html">contact me</a></li>
				
			</ul>
			
		</div>
	
	</div>
	
</nav>

<div class="jumbotron">

	<div class="container text-center">
	
		<h3>Welcome to <span>Carlos Martinez</span>'s website</h3>
		
		<div class="row">
		
			<div class="col-lg-6">
				<img src="https://scontent.flhr3-2.fna.fbcdn.net/v/t1.0-9/15965068_10154858290396354_1983436181302302499_n.jpg?oh=1774b17347d21394afb4d304ccafbb5e&oe=59465625" width="400" height="auto" />
			</div>

			<div class="col-lg-6">
				<p id="paragraph">Music is my lifestyle, music is in my blood, hope you enjoy the content and feel free leave a comment in the "upcoming events" section</p>
			</div>
		
		</div>
	
	</div>
	
</div>

<div class="footer">

	<ul>
		<li><img src="css/pics/underdevelopment.png" id="underdevelopment"></li>
		<li><p>This website is under development</p></li>
	</ul>

</div>

<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
	var sc_project=11273342;
	var sc_invisible=1;
	var sc_security="e1a20e80";
	var scJsHost = (("https:" == document.location.protocol) ?
	"https://secure." : "http://www.");
	document.write("<sc"+"ript type='text/javascript' src='" + scJsHost+
	"statcounter.com/counter/counter.js'></"+"script>");
</script>

<noscript>

	<div class="statcounter">
		<a title="site stats" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="//c.statcounter.com/11273342/0/e1a20e80/1/" alt="site stats"></a>
	</div>
	
</noscript>
<!-- End of StatCounter Code for Default Guide -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
    3. March 30th, 2017, 11:31 PM
    #3
  3. Catacaustic's Avatar
    Catacaustic
    Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)
    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,386
    Rep Power
    2105
    You don't need to set the initial-width value. That's what "breaking" site site on phones.

    This will do the right thing for you.

    Code:
    <meta name="viewport" content="width=device-width">
    4. March 31st, 2017, 02:16 PM
    #4
  4. No Profile Picture
    mjayt
    Registered User
    Devshed Newbie (0 - 499 posts)
    Join Date
    Jan 2017
    Posts
    11
    Rep Power
    0
    All of the bootstrap examples actually start with an initial scale and they respond fine on a mobile device.

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    The initial-scale value merely helps properly display the page on devices when you change view orientation.
    5. May 30th, 2017, 02:07 AM
    #5
  5. No Profile Picture
    techsophia
    Registered User
    Devshed Newbie (0 - 499 posts)
    Join Date
    May 2017
    Posts
    28
    Rep Power
    0
    I am using the following html code

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
    <body>
    test
    </body>
    </html>
    My intention is to prevent user from zooming in or out. The above code isn't working in iPhone and Android. Any solution ?

    EDIT: It appears in iPhone settings, if Zoom is selected as On under Settings>Accessibility>Zoom, then this will override meta tag. Source

    Not sure why it is happening in android.
« Previous Thread | Next Thread »
IMN logo majestic logo threadwatch logo seochat tools logo