I need help with adjusting the width slider in my iframe. I want the width slider to control the content width within the iframe, not the actual width of the iframe itself. Essentially, I want to switch between mobile and desktop mode by resizing the content inside the iframe while keeping the iframe size fixed. How can I achieve this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
iframe {
width: 240px;
height: 240px;
}
#sliders {
background-color: #ffffff;
position: fixed;
bottom: 0%;
left: 0%;
right: 0%;
padding-left: 5px;
padding-bottom: 8px;
border-top: 1px solid #000000;
}
</style>
</head>
<body>
<div style="overflow-x: scroll">
<iframe id="myIframe" src="index.html"></iframe>
</div>
<div id="sliders">
<label>width: <input type="range" id="w" min="240" max="1024" value="240" style="width:97%" /></label>
<label>height: <input type="range" id="h" min="240" max="1024" value="240" style="width:97%" /></label>
</div>
<script>
const iFrame = document.querySelector('#myIframe');
const sliders = document.getElementById('sliders');
const w = document.getElementById('w');
const h = document.getElementById('h');
sliders.addEventListener('input', e => {
const tgt = e.target.closest('[type=range]');
if (!tgt) return; // not a slider
iFrame.style.width = w.value + 'px'
iFrame.style.height = h.value + 'px'
})
</script>
</body>
</html>