Multiple viewports for Dummies

viewport.html

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .header {
    background: #eee;
    padding: 1rem;
    display: flex;
    justify-content: center;
  }
  #url-input {
    font-size: 1.4rem;
    padding: 0.25rem 1rem;
    min-width: 500px;
  }
  .frame-wrapper {
    overflow: auto;
    padding: 1rem;
  }
  .iframe {
    border: 1px #ccc solid;
    margin-right: 1rem;
  }
  #frame-holder {
    display: flex;
    flex-wrap: nowrap;    
  }
</style>
<div class='header'>
  <input id='url-input' type='url' placeholder="Enter URL to preview" />
</div>

<div class="frame-wrapper">
<div id='frame-holder'>

</div>
</div>

<script>
  const VIEWPORTS = {
    mobile1: {
      name: 'Small mobile',
      styles: {
        height: '568px',
        width: '320px',
      },
      type: 'mobile',
    },
    mobile2: {
      name: 'Large mobile',
      styles: {
        height: '896px',
        width: '414px',
      },
      type: 'mobile',
    },
    tablet: {
      name: 'Tablet',
      styles: {
        height: '1112px',
        width: '834px',
      },
      type: 'tablet',
    },
  }
  function main () {
    const urlInput = document.getElementById('url-input')
    const frameHolder = document.getElementById('frame-holder')
    const iframes = []
    for (const id in VIEWPORTS) {
      const viewport = VIEWPORTS[id]
      const iframe = document.createElement('iframe')
      iframe.className = 'iframe'
      iframe.width = viewport.styles.width
      iframe.style.minWidth = viewport.styles.width
      iframe.height = viewport.styles.height
      iframe.frameBorder = 0
      iframe.name = viewport.name
      iframe.src = `data:text/html;charset=utf-8, ${viewport.name}`
      frameHolder.appendChild(iframe)
      iframes.push(iframe)
    }
    urlInput.addEventListener('input', (e) => {
      const urlValue = e.target.value
      for (frame of iframes) {
        frame.setAttribute('src', urlValue)
      }
    })
  }

  window.onload = main
</script>