Ever found yourself repeatedly switching between different devices to check how your website looks?

When building responsive websites, it’s essential to verify how designs render across desktop, tablet, and mobile screen sizes. While browser developer tools work well, having a standalone preview tool is much more convenient for client presentations and team collaboration. This tutorial will show you how to build your own responsive website preview tool using jQuery and iframes.

HTML Structure

Let’s start with the HTML framework that creates our device preview interface:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div class="responsive_viewer">
    <h1>Responsive Website Preview</h1>
    <div class="buttons">
        <button id="pcBtn" class="active" data-device="pc">Desktop <span class="mo_hidden">(1920px)</span></button>
        <button id="tabletBtn" data-device="tablet">Tablet <span class="mo_hidden">(768px)</span></button>
        <button id="mobileBtn" data-device="mobile">Mobile <span class="mo_hidden">(375px)</span></button>
    </div>
    
    <div class="frame_container">
        <div class="iframe_wrapper">
            <iframe class="preview_frame" src="https://example.com"></iframe>
        </div>
    </div>
</div>

• Overall Structure
  The preview tool is contained within the .responsive_viewer class, which houses a title, device selection buttons, and an iframe for displaying website content.

• Device Selection Buttons
  Three buttons represent different device sizes: desktop (1920px), tablet (768px), and mobile (375px). Each button has a data-device attribute that identifies its device type. The .mo_hidden class hides pixel dimensions on smaller screens.

• iframe Preview Area
  The heart of the tool is an iframe element nested within container divs. This iframe will load and display the target website, allowing us to adjust its size dynamically.

CSS Styling

Now let’s style our preview tool with clean, functional CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.responsive_viewer { display: flex; gap: 20px; max-width: 1200px; margin: 0 auto; flex-direction: column; } 
.responsive_viewer h1 { margin-bottom: 20px; font-size: 24px; color: #333; text-align: center; } 
.responsive_viewer .buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } 
.responsive_viewer button { padding: 10px 20px; background-color: #485563; border: none; border-radius: 5px; font-size: 16px; color: white; cursor: pointer; transition: background-color 0.3s; } 
.responsive_viewer button:hover { background-color: #3a4654; } 
.responsive_viewer button.active { background-color: #29323c; } 
.responsive_viewer .frame_container { overflow: hidden; display: flex; justify-content: center; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(45, 54, 65, 0.2); transition: all 0.3s ease; } 
.responsive_viewer .iframe_wrapper { overflow: hidden; position: relative; height: calc(100vh - 350px); max-width: 100%; border: 1px solid #cbd2d9; box-shadow: 0 2px 4px rgba(71, 84, 99, 0.1); transition: all 0.3s ease; } 
.responsive_viewer iframe { width: 100%; height: 100%; border: none; transform-origin: 0 0; } 
@media (max-width: 768px){
    .responsive_viewer .mo_hidden { display: none; } 
}

• Layout Configuration
  The preview tool has a maximum width of 1200px and is centered on the page. We use flexbox for a clean, vertical layout with appropriate spacing between elements.

• Button Design
  The device selection buttons feature a sleek dark blue gradient that changes on hover and when active. Their rounded corners and padding create comfortable, easy-to-click targets.

• Frame Container
  The preview area uses a white background with subtle shadow effects for a clean, modern look. We use a nested container structure to separate styling concerns from functional requirements.

• iframe Configuration
  The iframe is set to fill its container completely without borders. The transform-origin: 0 0 property is crucial for ensuring our scaling happens from the top-left corner.

• Responsive Adaptation
  On smaller screens (below 768px), we hide the pixel dimensions to conserve space. The iframe container’s height adjusts dynamically based on the viewport height, maintaining visibility on all devices.

jQuery Implementation

The magic of our responsive preview tool happens through jQuery:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

// Initialize and control responsive website preview
function handleIframeLoad() {
    // Cache key DOM elements
    const $iframeWrapper = $('.responsive_viewer .iframe_wrapper');
    const $preview = $('.responsive_viewer .preview_frame');
    
    // Device configuration values
    let currentDevice = 'pc';
    let deviceSizes = {
        'pc': 1920,
        'tablet': 768,
        'mobile': 375
    };
    
    // Device selection button events
    $('.responsive_viewer .buttons button').on('click', function() {
        const $this = $(this);
        const device = $this.data('device');
        
        $this.addClass('active').siblings().removeClass('active');
        setDeviceSize(device);
    });

    // Set device size and apply scaling
    function setDeviceSize(device) {
        currentDevice = device;
        const deviceWidth = deviceSizes[device];
        const containerWidth = $iframeWrapper.width();
        
        // Set frame width
        $preview.css('width', deviceWidth + 'px');
        applyScaling(deviceWidth, containerWidth);
        
        // Apply scaling again after DOM updates
        setTimeout(() => {
            applyScaling(deviceWidth, $iframeWrapper.width());
        }, 50);
    }
    
    // Apply scaling based on container and device width
    function applyScaling(deviceWidth, containerWidth) {
        let scale = 1;
        if (containerWidth < deviceWidth) {
            scale = containerWidth / deviceWidth;
            $preview.css('transform', `scale(${scale})`);
        } else {
            $preview.css('transform', 'scale(1)');
        }
        
        // Adjust height according to scale
        setTimeout(() => {
            const wrapperHeight = $iframeWrapper.height();
            $preview.css('height', (wrapperHeight / scale) + 'px');
        }, 50);
    }
    
    // Handle window resize events
    $(window).on('resize', function() {
        setDeviceSize(currentDevice);
    });
    
    // Adjust size when iframe content loads
    $preview.on('load', function() {
        setDeviceSize(currentDevice);
    });
}

// Initialize on page load
$(document).ready(function() {
    handleIframeLoad();
});

• Element Caching and Initialization
  We start by caching frequently accessed DOM elements to improve performance. Device widths are stored in a configuration object that’s easy to customize for different device sizes.

• Button Event Handling
  When a button is clicked, we apply the active styling and call the setDeviceSize function to update the preview. This creates an interactive experience as users switch between device views.

• Dynamic Size Adjustment
  The setDeviceSize function sets the iframe width according to the selected device and then scales it to fit the container. We use setTimeout to ensure all DOM updates are complete before measuring sizes.

• Proportional Scaling Calculation
  When a device width exceeds the container width, we calculate a scaling ratio to shrink the preview proportionally. This maintains the correct aspect ratio while fitting within the available space.

• Event Handling for Responsiveness
  Event listeners for window resizing and iframe loading ensure the preview maintains the correct dimensions even when the browser size changes or new content loads.

Practical Use Cases

Here’s how you can leverage this responsive preview tool:

1. Development and Testing
   Test your websites across different device sizes without constantly switching between physical devices or browser dev tools. Point the iframe to your local development server to preview changes in real-time.

2. Client Presentations
   Impress clients with an interactive way to demonstrate how their website responds to different device sizes. It’s more engaging than static screenshots and helps clients visualize the final product.

3. Portfolio Enhancement
   Add this tool to your portfolio to showcase your responsive websites. Allow visitors to interactively test your work across different screen sizes without leaving your portfolio page.

Conclusion

Building a responsive device preview tool with jQuery and iframes gives you a powerful way to visualize and test websites across multiple screen sizes. The solution is lightweight, requiring just a handful of HTML, CSS, and JavaScript code, yet provides functionality similar to browser developer tools.

This tool is particularly valuable for front-end developers, designers, and project managers who need to validate responsive designs or showcase work to clients. It’s also an excellent learning resource for understanding how CSS scaling and responsive design principles work together.

How do you currently test your responsive designs? Have you created any extensions or improvements to this basic preview tool? Share your experiences in the comments below!