Responsive Viewport Tester

A lightweight, zero-dependency tool built with vanilla HTML, CSS, and JavaScript to test responsive layouts across different screen sizes quickly and efficiently.

🚀 Features

• Instant Device Presets: Quickly switch between Mobile, Tablet, and Desktop dimensions with a single click.
• Fluid Slider Control: Manually scale the viewport width smoothly to test boundary conditions and responsive breakpoints.
• URL Loading: Test any live website or local prototype instantly within an embedded <iframe>.
• Persistent Notes: Keep track of design bugs and layout issues per resolution using local storage.
• Zero Dependencies: Pure vanilla implementation—no frameworks, heavy build tools, or external libraries required.

🛠️ Built With

• HTML5
• CSS3 (Custom Properties, Flexbox)
• Vanilla JavaScript (ES6+)

📦 Getting Started

1. Clone the repository:

   git clone [https://github.com/resul-elezi/responsive-viewport-tester.git](https://github.com/resul-elezi/responsive-viewport-tester.git)

2. Open index.html directly in your favorite browser or serve it via a local development server (e.g., Live Server in VS Code/VSCodium).

💡 Usage

1. Enter your target URL into the toolbar input field and click Load.
2. Click one of the device preset buttons or use the range slider to adjust the width of the viewport frame.
3. Open the Notes sidebar to jot down observations, bugs, or fixes specific to the current view.

📄 License

Distributed under the MIT License. See LICENSE for more information.