Skip to content

Instantly share code, notes, and snippets.

@haveboard

haveboard/Responsive Bookmarklet code Multi-frame

Created April 4, 2013 17:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save haveboard/5312123 to your computer and use it in GitHub Desktop.
Save haveboard/5312123 to your computer and use it in GitHub Desktop.
Download ZIP
A responsive bookmarklet for testing. I apologize that I don't remember where I found this to give credit to original offer. Definitely a handy tool though.
Raw
Responsive Bookmarklet code Multi-frame
javascript:document.write('<!DOCTYPE html><html><head><meta charset="utf-8"><title>Responsive Design Testing</title><style>body %7B margin: 20px; font-family: sans-serif; overflow-x: scroll; %7D.wrapper %7B width: 6000px; %7D.frame %7B float: left; %7Dh2 %7B margin: 0 0 5px 0; %7Diframe %7B margin: 0 20px 20px 0; border: 1px solid %23666; %7D</style></head><body><div class="wrapper"><div class="frame"><h2>240<span> x 320</span> <small>(mobile)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="240" height="320"></iframe></div><div class="frame"><h2>320<span> x 480</span> <small>(mobile)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe></div><div class="frame"><h2>480<span> x 640</span> <small>(small tablet)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe></div><div class="frame"><h2>768<span> x 1024</span> <small>(tablet - portrait)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe></div><div class="frame"><h2>1024<span> x 768</span> <small>(tablet - landscape)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe></div><div class="frame"><h2>1200<span> x 800</span> <small>(desktop)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe></div><div class="frame"><h2>480<span> x 320</span> <small>(landscape mobile)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="480" height="320"></iframe></div></div></body></html>')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment