Got it, let's break this down into two key parts: getting that 1920px-wide site to fit in a 1024px container via iframe, and building a user-friendly way to switch between different viewport widths without touching developer tools. Here's how to do both:

The trick here is using CSS transform: scale() to shrink the iframe down proportionally, while keeping the original site's layout intact. We'll also use transform-origin to ensure the scaled content aligns cleanly with the container's top-left corner.

HTML Structure #

<!-- Container to hold the scaled iframe -->
<div class="viewport-container">
  <!-- Replace "your-target-site-url" with the actual URL you want to embed -->
  <iframe src="your-target-site-url" class="scaled-iframe"></iframe>
</div>

CSS Styling #

.viewport-container {
  width: 1024px; /* Your fixed container width */
  height: 640px; /* Matches 1920x1080 aspect ratio: 1024 ÷ (1920/1080) = 640 */
  overflow: hidden; /* Hide any overflow after scaling */
  border: 1px solid #ddd; /* Optional: Add a border to visualize the container */
  margin: 20px 0;
}

.scaled-iframe {
  width: 1920px; /* Original width of the embedded site */
  height: 1080px; /* Original height (adjust based on your target site's aspect ratio) */
  border: none;
  transform: scale(0.5333); /* 1024 ÷ 1920 = 0.5333... */
  transform-origin: top left; /* Critical: Aligns scaled content with container's corner */
}

To let users toggle between different widths easily, we'll add a simple dropdown control and use JavaScript to dynamically update the container size and iframe scaling.

Add the Control UI #

Insert this above your container div:

<div class="viewport-controls">
  <label for="viewport-select">Test Viewport Width:</label>
  <select id="viewport-select">
    <option value="375">Mobile (375px)</option>
    <option value="768">Tablet (768px)</option>
    <option value="1024" selected>Laptop (1024px)</option>
    <option value="1920">Desktop (1920px)</option>
  </select>
</div>

Style the Controls #

.viewport-controls {
  font-family: Arial, sans-serif;
  padding: 10px;
}

.viewport-controls select {
  padding: 8px 12px;
  margin-left: 10px;
  font-size: 14px;
  cursor: pointer;
}

JavaScript for Dynamic Switching #

This script listens for dropdown changes, calculates the correct scale ratio, and updates the container/iframe styles:

const viewportSelect = document.getElementById('viewport-select');
const container = document.querySelector('.viewport-container');
const iframe = document.querySelector('.scaled-iframe');

// Set the original dimensions of your target site here
const originalSiteWidth = 1920;
const originalSiteHeight = 1080;

viewportSelect.addEventListener('change', (e) => {
  const targetWidth = parseInt(e.target.value);
  const scaleRatio = targetWidth / originalSiteWidth;

  // Update container size to match the selected viewport
  container.style.width = `${targetWidth}px`;
  container.style.height = `${originalSiteHeight * scaleRatio}px`;

  // Adjust the iframe's scale to fit the container
  iframe.style.transform = `scale(${scaleRatio})`;
});

• X-Frame-Options Restrictions: If your target site blocks iframe embedding, you'll need to either modify the site's server settings (if it's your site) or use a proxy service (note: proxying may have legal/compliance implications).
• Dynamic Height: If the embedded site has variable height, add this code to auto-adjust the container height after the iframe loads:

  iframe.addEventListener('load', () => {
    const contentHeight = iframe.contentWindow.document.body.scrollHeight;
    iframe.style.height = `${contentHeight}px`;
    const currentScale = parseFloat(iframe.style.transform.replace('scale(', '').replace(')', ''));
    container.style.height = `${contentHeight * currentScale}px`;
  });
  

• Event Accuracy: Don't worry about misaligned clicks/taps—browsers automatically map mouse/touch events to the scaled iframe content, so interactions work as expected.

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