编码新手。我正在构建一个带有基本游戏的网页，以学习 HTML、Javascript 和 CSS。 当我使用 Chrome 在我的手机上访问该网站时，它被缩放并且只显示大约 1/3 的屏幕放大到左上角。 在阅读了关于同一主题的其他问题后，我添加了一个元标记来设置 width=device-width 和 initial-scale = 1.0 ，但这仍然没有解决我的问题。 我添加了一个片段，其中包含我认为相关的所有代码。 这是我在 stackoverflow 上的第一个问题，我很绝望! 谢谢
body {
min-width: 800px;
}
.topNav {
overflow: hidden;
margin: 5%;
color: black;
}
.topNav a {
text-decoration: none;
float: right;
color: black;
text-align: center;
padding: 2.5em .5em;
}
.topNav a:hover {
color: blue;
}
.topNav h1 {
float: left;
}
.container {
width = 100%;
}
*:focus {
outline: none;
}
#breakoutCanvas {
float: left;
padding: 0;
background: #eee;
display: block;
margin-left: 25%;
}<!DOCTYPE html>
<html lang = "en">
<head>
<title>Games</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="../../css/styleMain.css">
<link rel="stylesheet" href="breakout/breakout.css">
</head>
<body id = "gamesBody">
<div class = "topNav" id = "indexTopNav">
<h1 class = "pageHeaders" id = "gamesPageHeader">These are the games</h1>
<a class = "navButton hvr-float-shadow" href = "../../index.html">Home</a>
<a class = "navButton hvr-float-shadow" href = "../sports/sports.html">Sports</a>
<a class = "navButton hvr-float-shadow" href = "../investing/investing.html">Investing</a>
<a class = "active navButton hvr-float-shadow" href = "games.html">Games</a>
</div>
<div class = "container">
<canvas id = "breakoutCanvas" width ="480" height="320"></canvas>
<input type = "range" min = "2" max = "30" value = "10" class = "slider" id = "ballSizeSlider">
<input type = "range" min = "1" max = "8" value = "3" class = "slider" id = "rowSlider">
</div>
<script src="breakout/breakout.js"></script>
</body>
</html>最佳答案
如果要在 canvas 标签内联指定宽度，则必须在 style -> style = "width:100%"中指定宽度，否则在 #breakoutCanvas 中指定宽度。对于 Canvas ，#breakoutCanvas 中是否需要添加 25% 的边距？
如果你想在个人电脑(分辨率超过 1024 像素)和移动设备中覆盖完整的浏览器，你也可以将宽度 100% 指定为 @Scott Marcus，否则你可以使用最大宽度。
如果您发布关于您希望元素如何排列的线框，可以指出正确的更正。 (您可以使用 paint 绘制线框或任何在线可用的工具。)
尝试将所有样式代码移至 CSS。
body {
width: 100%;
margin:0;
padding:0;
}
.topNav {
overflow: hidden;
margin: 5%;
color: black;
}
.topNav a {
text-decoration: none;
float: right;
color: black;
text-align: center;
padding: 2.5em .5em;
}
.topNav a:hover {
color: blue;
}
.topNav h1 {
float: left;
}
.container {
width = 100%;
}
*:focus {
outline: none;
}
#breakoutCanvas {
float: left;
padding: 0;
background: #eee;
display: block;
}<!DOCTYPE html>
<html lang = "en">
<head>
<title>Games</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="../../css/styleMain.css">
<link rel="stylesheet" href="breakout/breakout.css">
</head>
<body id = "gamesBody">
<div class = "topNav" id = "indexTopNav">
<h1 class = "pageHeaders" id = "gamesPageHeader">These are the games</h1>
<a class = "navButton hvr-float-shadow" href = "../../index.html">Home</a>
<a class = "navButton hvr-float-shadow" href = "../sports/sports.html">Sports</a>
<a class = "navButton hvr-float-shadow" href = "../investing/investing.html">Investing</a>
<a class = "active navButton hvr-float-shadow" href = "games.html">Games</a>
</div>
<div class = "container">
<canvas id = "breakoutCanvas" style =" width:100% "></canvas>
<input type = "range" min = "2" max = "30" value = "10" class = "slider" id = "ballSizeSlider">
<input type = "range" min = "1" max = "8" value = "3" class = "slider" id = "rowSlider">
</div>
<script src="breakout/breakout.js"></script>
</body>
</html>关于javascript - 网页在手机屏幕上被放大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51914032/