CODEWITHSUNDEEP
htmlgoogle-chrome
Sam Clarke
Sam Clarke

Reputation: 120

website seems to shrink on chrome

I've been playing around with a website for a while now, and it seems like when I pull it up on chrome, on a mobile, it completely breaks.

In order to bug fix this, I made a minimal copy of my nav bar, and the issue still happens.

I've got the code below, if anyone could help me, that'd be great :).

<!DOCTYPE html>

<html lang="en">
	<head>
			<!-- Heading -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,width=device-width,initial-scale=1.0">
			<!-- Bootstrap -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
	</head>
  
	<body>
		<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
			<!-- Navbar toggle button -->
			<button class="navbar-toggler navbar-toggler-right" type="button" 
			data-toggle="collapse" data-target="#navbarSupportedContent" 
			aria-controls="navbarSupportedContent" aria-expanded="false" 
			aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<!-- Navbar logo -->
			<a class="navbar-brand" href="/#">
				<img class="img img-responsive" style="width:48px; height:48px;" alt="logo"
				     src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" />
			</a>

			<!-- Some other navbar shit; mostly  -->
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav mr-auto animated ">
					<li class="nav-item" id="home-navi">
						<a class="nav-link" href="/#"><i class="fa fa-home" aria-hidden="true"></i> Home </a>
					</li>
					<li class="nav-item" id="help-navi" >
						<a class="nav-link" id="help" href="/#"><i class="fa fa-question-circle" aria-hidden="true" ></i> Help </a>
					</li>
				</ul>
			</div>
        </nav>
  </body>
</html>

Here's photos of what's going wrong. (Both tested on the developer tools Samsung Galaxy S5).

on chrome

on firefox

-Thanks, Sam.

Upvotes: 1

Views: 33

Answers (1)

Sam Clarke
Sam Clarke

Reputation: 120

Fixed it!

Turns out, it was a problem with the meta tag.

Adding this as the meta tag

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Seems to fix it on chrome.

-Hope this helps, Sam.

Upvotes: 2

Related Questions