时间戳

首页 > 解决方案 > 网站似乎在 chrome 上缩小了

html - 网站似乎在 chrome 上缩小了

问题描述

我已经在一个网站上玩了一段时间了，似乎当我在 chrome 上打开它时，在移动设备上，它完全崩溃了。

为了解决这个问题，我制作了导航栏的最小副本，但问题仍然存在。

我有下面的代码，如果有人可以帮助我，那就太好了:)。

<!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>

这里是出了什么问题的照片。（两者都在开发工具三星 Galaxy S5 上进行了测试）。

镀铬

在火狐上

-谢谢，山姆。

标签： htmlgoogle-chrome

解决方案

修复！

事实证明，这是元标记的问题。

将此添加为元标记

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

似乎在chrome上修复它。

- 希望这会有所帮助，山姆。

推荐阅读