https://github.com/mintakaaaa/viewport-inspector

A tool to add into web projects that allows users to conveniently resize your website and assess mobile responsiveness
https://github.com/mintakaaaa/viewport-inspector

Last synced: about 1 month ago
JSON representation

A tool to add into web projects that allows users to conveniently resize your website and assess mobile responsiveness

• Host: GitHub
• URL: https://github.com/mintakaaaa/viewport-inspector
• Owner: Mintakaaaa
• Created: 2024-07-29T13:03:38.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-29T15:35:48.000Z (6 months ago)
• Last Synced: 2024-11-09T07:40:28.464Z (3 months ago)
• Language: JavaScript
• Size: 5.72 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# viewport-inspector

A tool to add into web projects that allows users to conveniently resize your website and assess mobile responsiveness.

The website to be resized is to be placed into an iframe (see main_website.html) as this allows original media queries of the resized website to apply.

This tool acts as a wrapper interface that displays your resizable website and houses the resizing functionality.

![me](https://github.com/Mintakaaaa/viewport-inspector/blob/main/demo.gif)

# Integration into your static web project

1. Insert the contents of this repository (the 6 files excluding readme.md & GIF) into your project directory at the same level as the main entrypoint to your website project (e.g. index.html). 

2. Your resizable website goes into the iframe inside the following HTML document:

   `

   main_website.html

   `

   

2.1.

   `

   resizable_content.html

   ` 

   is an example HTML document that acts as the resizable website. Assuming the Viewport Inspector is in the same level of directory as the main entrypoint to your website, the `src` attribute of the iframe should just be `(entrypoint-name).html`.

   

   

   Note: The Viewport Inspector (called toolbar in the HTML) is already included in the HTML document.

   

   Note: The Viewport Inspector's CSS and JS are already linked to the HTML document `main_website.html`.