Responsive Tester

A modern and lightweight responsive website testing tool built with HTML, CSS, and JavaScript.

Responsive Tester allows developers and designers to preview websites at different screen sizes directly inside a customizable preview frame. It provides adjustable width and height controls, making it easy to test layouts without opening browser developer tools.

Features

• Live website preview using iframe
• Custom URL loading
• Adjustable width control
• Adjustable height control
• Real-time screen size display
• Clean and modern interface
• Tablet and desktop optimized
• Mobile warning screen
• Lightweight and fast
• No external frameworks required

Live Demo

https://mayank-tech-official.github.io/responsive-tester/

How to Use

1. Open the Responsive Tester.
2. Enter a website URL.
3. Click the "Load Website" button.
4. Use the bottom slider to change width.
5. Use the right slider to change height.
6. Test responsiveness at different resolutions.

Supported Resolutions

Width:

• Minimum: 320px
• Maximum: 2560px

Height:

• Minimum: 480px
• Maximum: 1600px

Important Note

Some websites may not load inside the preview frame.

Many modern websites use security headers such as:

• X-Frame-Options
• Content-Security-Policy (CSP)

These restrictions prevent websites from being displayed inside iframes.

This is a browser security limitation and not a bug in Responsive Tester.

Technologies Used

• HTML5
• CSS3
• JavaScript (Vanilla JS)

Author

Mayank Sinha

GitHub: https://github.com/mayank-tech-official

---

Made with ❤️ by Mayank Tech