Question

当我显示标题和SVG元素时，在移动设备上，标题的宽度比页面的宽度小px，并且无法正确显示viewBox。在桌面上，尽管我在CSS中将宽度设置为100％或在JavaScript中使用window.screen.width * window.devicePixelRatio，它仍将显示水平滚动条。我想要简单的标题和类似Stack Overflow页面的内容。我做错了什么？

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      background-color: #58CCED;
      margin: 0;
    }
    #header {
      width: 100%;
      background-color: #072F5F;
      padding: 40px;
    }
  </style>
  <body>
    <div id="header"></div>
    <svg id="viewport" width="0" height="0" viewBox="0 0 0 0" style="fill: red; outline: 5px solid black">
      <!-- draw objects -->
      <rect x="0" y="0" width="100" height="100"/>
    </svg>
    <script>
      // document.getElementById("header").style.width = (window.screen.width*window.devicePixelRatio);

      viewport.setAttribute("width", (window.screen.width*window.devicePixelRatio)-20);
      viewport.setAttribute("height", (window.screen.height*window.devicePixelRatio));

      viewport.setAttribute("viewBox","0 0 "+((window.screen.width*window.devicePixelRatio)-20)+" "+ ((window.screen.height*window.devicePixelRatio)));
    </script>
  </body>
</head>
</html>

Answer 1

您在这里做错了几件事。

您要添加到#header的填充已添加到您设置的100％宽度。这意味着标题现在比页面宽。这样您将获得一个水平滚动条。这就是标准盒模型的工作方式。要在100％中包括填充和边框宽度，请使用box-sizing: border-box;。
这同样适用于要添加到SVG的边框。使用相同的修复程序。
最后您使用的是viewBox错误。 viewBox用于描述SVG内容的大小。不是视口的大小。应该将其设置为viewBox="0 0 100 100"以匹配<rect>的大小。
您在这里不需要任何Javascript。

body {
  background-color: #58CCED;
  margin: 0;
}
#header {
  width: 100%;
  background-color: #072F5F;
  padding: 40px;
  box-sizing: border-box;
}
#viewport {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

<div id="header"></div>
<svg id="viewport" width="0" height="0" viewBox="0 0 100 100" style="fill: red; outline: 5px solid black">
  <!-- draw objects -->
  <rect x="0" y="0" width="100" height="100"/>
</svg>

显示标题和SVG元素时出现问题

1 个答案: