Responsive Website Tester
1024px
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f4f9;
color: #333;
}
.container {
width: 90%;
margin: 0 auto;
text-align: center;
}
header {
background-color: #4CAF50;
padding: 20px;
color: white;
}
header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
header p {
font-size: 1.2rem;
}
.device-selector {
margin: 20px 0;
}
.device-selector select {
padding: 10px;
font-size: 1rem;
border: 1px solid #ddd;
}
.screen-container {
margin: 30px 0;
padding: 20px;
background-color: white;
border: 1px solid #ddd;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
iframe {
width: 100%;
height: 500px;
border: none;
background-color: #fff;
}
.controls {
margin: 20px 0;
}
.controls input {
width: 80%;
margin-top: 10px;
}
#width-value {
font-weight: bold;
padding-left: 10px;
}
footer {
padding: 10px;
font-size: 1rem;
background-color: #4CAF50;
color: white;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
// Device screen sizes
const devices = {
iphone: { width: 390, height: 844 },
ipad: { width: 768, height: 1024 },
desktop: { width: 1024, height: 768 },
samsung: { width: 412, height: 915 }
};
// Elements
const deviceSelect = document.getElementById('device');
const iframe = document.getElementById('preview');
const widthSlider = document.getElementById('width');
const widthValue = document.getElementById('width-value');
// Event listener for device selection
deviceSelect.addEventListener('change', function() {
const selectedDevice = deviceSelect.value;
updatePreview(devices[selectedDevice].width, devices[selectedDevice].height);
});
// Event listener for width slider
widthSlider.addEventListener('input', function() {
const width = widthSlider.value;
widthValue.textContent = `${width}px`;
updatePreview(width, iframe.height);
});
// Function to update iframe's width and height
function updatePreview(width, height) {
iframe.style.width = `${width}px`;
iframe.style.height = `${height}px`;
}
// Initialize with default settings
updatePreview(devices.iphone.width, devices.iphone.height);
