Skip to content

Instantly share code, notes, and snippets.

@rmdort
Last active May 30, 2021 16:28
Show Gist options
  • Save rmdort/ec4493a5e116de7ce2279e2b0d289741 to your computer and use it in GitHub Desktop.
Save rmdort/ec4493a5e116de7ce2279e2b0d289741 to your computer and use it in GitHub Desktop.
Multiple viewports for Dummies
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment