March 29th, 2017, 10:07 AM
-
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>
March 30th, 2017, 06:25 PM
-
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>
March 30th, 2017, 11:31 PM
-
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">
March 31st, 2017, 02:16 PM
-
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.
-
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.