技术需求：让文本完全适配浏览器窗口100%宽高且无滚动

Got it, let's build exactly what you need—no extra UI, just text that perfectly fills the viewport, refreshes on schedule, and never causes scrollbars. Here's a complete, tested solution:

HTML Structure #

We'll keep this super minimal—just a container for our text, plus your specified Google Font (swap in your chosen font family here):

<!-- Replace with your specific Google Font embed code -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">

<div id="text-container"></div>

CSS Styling #

This ensures the container takes up 100% of the viewport, adds a small margin, and prevents scrollbars entirely:

/* Reset default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden; /* Lock scrollbars completely */
}

#text-container {
  width: 100vw;
  height: 100vh;
  padding: 1.5rem; /* Small margin—adjust to your preference */
  display: grid;
  place-items: center; /* Center text vertically + horizontally */
  font-family: 'Roboto', sans-serif; /* Swap in your specified font */
  text-align: center;
  word-wrap: break-word;
  overflow: hidden;
}

JavaScript Logic #

This handles fetching new text on a timer, updating the container, and dynamically adjusting the font size so the text always fits perfectly without overflow:

const textContainer = document.getElementById('text-container');
const refreshInterval = 5000; // X seconds—change this to your desired interval

// Adjust font size to fit the viewport exactly
function adjustFontSize() {
  let fontSize = 120; // Start with a large base size
  textContainer.style.fontSize = `${fontSize}px`;

  // Shrink font until text fits inside the container
  while (textContainer.scrollHeight > textContainer.clientHeight || textContainer.scrollWidth > textContainer.clientWidth) {
    fontSize--;
    textContainer.style.fontSize = `${fontSize}px`;
    // Prevent infinite loop with a minimum font size
    if (fontSize <= 12) break;
  }
}

// Fetch new text and update the container
async function updateText() {
  // Replace this with your actual text-fetching logic
  // Example: Fetch from an API endpoint
  const response = await fetch('/your-text-source');
  const newText = await response.text();

  textContainer.textContent = newText;
  adjustFontSize();
}

// Initial load + set up automatic refreshes
updateText();
setInterval(updateText, refreshInterval);

// Re-adjust font size if the window is resized
window.addEventListener('resize', adjustFontSize);

• No Scrollbars: The overflow: hidden rule on both body and the container ensures scrollbars never appear, even temporarily.
• Perfect Fit: The adjustFontSize function dynamically shrinks the font until the text fits exactly within the viewport (including the small padding).
• Responsive: The resize listener ensures the text re-fits if the user resizes their browser window.
• Clean UI: No extra elements, just the text centered in the viewport with your chosen font.

内容的提问来源于stack exchange，提问作者downstairs