Question

编码新手。我正在建立一个包含基本游戏的网页来学习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>

Answer 1

如果要指定与canvas标记内联的宽度，则必须在style-> style =“ width：100％”中指定宽度，否则在#breakoutCanvas中指定宽度。还是在#breakoutCanvas中添加了25％的保证金？

如果要在PC（分辨率将大于1024px）和移动设备中覆盖完整的浏览器，还可以将宽度设置为正文的100％作为@Scott Marcus，否则可以使用max-width。

如果发布关于希望元素如何排列的线框，则可以指出正确的校正。（您可以使用绘画来绘制线框或在线上可用的任何工具。）

尝试将所有样式代码移至CSS。

df <- mtcars %>%
  rename(mpg2 = mpg) %>%
  walk(f) %>%
  mutate(mpg2 = mpg2 * r)
## Calling f on numeric
## ...
## Calling f on numeric

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;
}

网页在移动屏幕上放大

1 个答案: