Skip to content

A Bookmarklet / Snippet that inserts a Media Query indicator into the page.

Notifications You must be signed in to change notification settings

AMeijerNL/mq-indicator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

============

A Bookmarklet / CSS Snippet that inserts a Media Query indicator into the page.

WOKR IN PROGRESS

  • THIS IS THE INITIAL COMMIT! STILL NEED TO FIX SOME LINKS AND REFERENCES

Quick start

  1. Go to the project page
  2. Drag the bookmarklet link to your bookmarks
  3. Go to any website
  4. When the page has loaded, select the bookmark you just created
  5. There you have it: a Media Query indicator

How it works

  • The bookmarklet uses Javascript to insert two elements & a small (only 2kb minified!) CSS file into the page
  • The selectors (and id's) are well chosen, so it is very unlikely it will overrule any of your existing selectors
  • Cross-browser compatible - as long as Media Queries are supported (Chrome, Safari, Firefox, IE10+).

Supported formats

  • Feature phone size (portrait)
  • Phone size (portrait & landscape)
  • Tablet size (portrait & landscape)
  • Desktop / PC size (landscape)
  • Extra Large / TV size (landscape)

Customization & more fun!

  • In case you don't like a Orange (background color), here's some more bookmarklets for you:
  • COMING SOON!
  • Want more? Fork the project and created your own!

About

A Bookmarklet / Snippet that inserts a Media Query indicator into the page.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published