Проблема с отображением заголовка и элемента SVG - PullRequest
Новая
       1

Проблема с отображением заголовка и элемента SVG

0 голосов
/ 27 января 2019

Когда я отображаю заголовок и элемент SVG, на мобильных устройствах ширина заголовка на несколько пикселей меньше ширины страницы, и viewBox отображается неправильно.На рабочем столе будет отображаться горизонтальная полоса прокрутки, хотя я установил ширину на 100% в CSS или использовал window.screen.width * window.devicePixelRatio в JavaScript.Я хочу простой заголовок и контент, такой как страница переполнения стека.Что я делаю не так? 

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

1 Ответ

0 голосов
/ 28 января 2019

Вы делаете несколько неправильных вещей здесь.

  1. Заполнение, которое вы добавляете к #header, добавляется к 100% ширине, которую вы установили.Значение заголовка теперь шире, чем страница.Таким образом, вы получите горизонтальную полосу прокрутки.Так работает стандартная блочная модель.Чтобы включить отступы и ширину границы в 100%, используйте box-sizing: border-box;.

  2. То же самое относится и к границе, которую вы добавляете в SVG.Используйте то же самое исправление.

  3. Наконец, вы используете viewBox неправильно.viewBox предназначен для описания размера содержимого SVG.Не размер окна просмотра.Он должен быть установлен на viewBox="0 0 100 100", чтобы соответствовать размеру <rect>.

  4. Вам не нужен 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...