Javascript typewriter 效应和容器大小

document.addEventListener("DOMContentLoaded", function () {
        var phrases = [
          "phrase 1",
          "phrase 2",
          "phrase 3",
          "phrase 4",
        ];

        var speed = 50;
        var flickerSpeed = 600;
        var pauseBetweenPhrases = 2000;

        var container = document.querySelector(".typewriter");
        var bar = document.querySelector(".typewriter-bar");
        var currentPhraseIndex = 0;
        var charIndex = 0;

        function typeWriter() {
          if (charIndex < phrases[currentPhraseIndex].length) {
            container.innerHTML +=
              phrases[currentPhraseIndex].charAt(charIndex);
            charIndex++;
            setTimeout(typeWriter, speed);
          } else {
            setTimeout(function () {
              backspace();
            }, pauseBetweenPhrases);
          }
        }

        function backspace() {
          if (charIndex >= 0) {
            container.innerHTML = phrases[currentPhraseIndex].substring(
              0,
              charIndex
            );
            charIndex--;
            setTimeout(backspace, speed);
          } else {
            currentPhraseIndex = (currentPhraseIndex + 1) % phrases.length;
            setTimeout(typeWriter, speed);
          }
        }

        function flicker() {
          bar.style.visibility =
            bar.style.visibility === "visible" ? "hidden" : "visible";
          setTimeout(flicker, flickerSpeed);
        }

        flicker();
        typeWriter(); // Start the typewriter effect
      });

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Hind Madurai', Arial, Helvetica, sans-serif;
}

h1 {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 10vh;
  line-height: 1;
}

h2 {
  font-family: 'Signika', Arial, Helvetica, sans-serif;
}

header {
  background-color: white;
  color: #222;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h2 {
  margin: 0;
  font-weight: 300;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
}

nav li {
  display: inline-block;
  margin-right: 20px;
}

nav a {
  text-decoration: none;
  color: #222;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #3ca6a6;
  text-decoration: underline;
}

@media only screen and (max-width: 600px) {
  header {
    flex-direction: column;
    text-align: center;
  }
  nav {
    margin-top: 10px;
  }
  nav ul {
    flex-direction: column;
    text-align: center;
  }
  nav li {
    display: block;
    margin: 10px 0;
  }
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
}

.content {
  flex: 1;
}

footer {
  background-color: #026773;
  color: white;
  text-align: center;
  padding: 10px;
  position: relative;
  z-index: 1;
  margin-top: auto;
}

footer::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 400px;
  background: url(imgs/layered-peaks-haikei.svg) repeat-x;
  z-index: 2;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  padding: 10px;
  z-index: 999;
}

.typewriter-container {width: 90vw; text-align:center;}

.typewriter {
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
}

.typewriter-bar {
  border-right: 1px solid #222;
}

<link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300&family=Poppins:ital,wght@0,600;1,600&family=Signika:wght@300;400&display=swap"
      rel="stylesheet"
    />
    <div class="skip-link">
      <a class="visually-hidden" href="#main-content">Skip to Main Content</a>
    </div>
    <header>
      <h2>Name</h2>
      <nav>
        <ul>
          <li><a href="#">Welcome</a></li>
          <li><a href="#">Selected Work</a></li>
          <li><a href="#">Resume</a></li>
        </ul>
      </nav>
    </header>
    <main id="main-content" class="container">
      <div class="content">
        <div class="typewriter-container">
          <h1>
            I'm a <span class="typewriter"></span
            ><span class="typewriter-bar"></span>
          </h1>
        </div>
        <h2>Hi there!</h2>
      </div>
    </main>
    <footer></footer>