Standards Calculator

HTML Tester

Test your HTML code with different viewport sizes and device emulation

HTML Code

0 characters

Device Emulation

×

Preview

Desktop (1440 × 900)

How to Use the HTML Tester

Enter HTML Code - Type or paste your HTML code in the editor at the top.

Select Device - Choose from predefined device sizes or enter custom dimensions to test your HTML on different screen sizes.

View Preview - See how your HTML renders in the preview panel with the selected device dimensions.

Test Responsiveness - Quickly switch between different device sizes to ensure your design is responsive.

Save Your Work - Use the download button to save your HTML code for future use.

Responsive Design Tips

Media Queries

/* Mobile First Approach */
/* Base styles for mobile */

/* Tablets and larger */
@media (min-width: 768px) {
  /* Tablet styles */
}

/* Desktops and larger */
@media (min-width: 1024px) {
  /* Desktop styles */
}

Viewport Meta Tag

<meta name="viewport" 
  content="width=device-width, 
  initial-scale=1.0">

Always include the viewport meta tag to ensure proper rendering on mobile devices.

Flexible Images

img {
  max-width: 100%;
  height: auto;
}

Make images responsive by setting max-width to 100%.

Common Breakpoints

Mobile: 320px - 480px
Tablets: 481px - 768px
Laptops: 769px - 1024px
Desktops: 1025px - 1200px
Large Screens: 1201px and above

`; // Initialize preview function updatePreview() { const html = htmlInput.value; const previewDocument = previewFrame.contentDocument || previewFrame.contentWindow.document; previewDocument.open(); previewDocument.write(html); previewDocument.close(); // Update character count charCount.textContent = `${html.length} characters`; } // Set device size function setDeviceSize(width, height, deviceName) { // Calculate scale to fit in the container const containerWidth = previewContainer.parentElement.clientWidth; const scale = Math.min(1, containerWidth / width); // Update preview container size and scale previewContainer.style.width = `${width}px`; previewContainer.style.height = `${height}px`; previewContainer.style.transform = `scale(${scale})`; // Update device info display currentDevice.textContent = `${deviceName} (${width} × ${height})`; // Update preview updatePreview(); } // Event listeners htmlInput.addEventListener('input', updatePreview); clearBtn.addEventListener('click', () => { htmlInput.value = ''; updatePreview(); }); sampleBtn.addEventListener('click', () => { htmlInput.value = sampleHTML; updatePreview(); }); copyBtn.addEventListener('click', () => { htmlInput.select(); document.execCommand('copy'); // Show feedback const originalText = copyBtn.innerHTML; copyBtn.innerHTML = `Copied!`; setTimeout(() => { copyBtn.innerHTML = originalText; }, 2000); }); downloadBtn.addEventListener('click', () => { const html = htmlInput.value; const blob = new Blob([html], {type: 'text/html'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'html-tester-export.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); refreshBtn.addEventListener('click', updatePreview); // Device buttons deviceBtns.forEach(btn => { btn.addEventListener('click', () => { const width = parseInt(btn.dataset.width); const height = parseInt(btn.dataset.height); const device = btn.dataset.device; // Remove active class from all buttons deviceBtns.forEach(b => b.classList.remove('bg-primary-600', 'text-white')); // Add active class to clicked button btn.classList.add('bg-primary-600', 'text-white'); setDeviceSize(width, height, device); }); }); // Custom size applyCustomSize.addEventListener('click', () => { const width = parseInt(customWidth.value) || 1440; const height = parseInt(customHeight.value) || 900; // Remove active class from all buttons deviceBtns.forEach(b => b.classList.remove('bg-primary-600', 'text-white')); setDeviceSize(width, height, 'Custom'); }); // Initialize with sample HTML and desktop size document.addEventListener('DOMContentLoaded', () => { // Initialize with sample HTML htmlInput.value = sampleHTML; // Set initial device (Desktop) const desktopBtn = document.querySelector('[data-device="Desktop"]'); desktopBtn.classList.add('bg-primary-600', 'text-white'); setDeviceSize(1440, 900, 'Desktop'); // Initialize syntax highlighting for code blocks document.querySelectorAll('pre code').forEach((block) => { hljs.highlightBlock(block); }); }); // Handle window resize window.addEventListener('resize', () => { // Get current dimensions const width = parseInt(previewContainer.style.width); const height = parseInt(previewContainer.style.height); // Recalculate scale const containerWidth = previewContainer.parentElement.clientWidth; const scale = Math.min(1, containerWidth / width); previewContainer.style.transform = `scale(${scale})`; });