Custom simple responsive / viewport resize button

I would like to make a simple viewport resizer:

When I build a website which is responsive I don't use bootstrap kinda stuff.
I build it custom. I was thinking about using a chunk which can be placed to the template.

The chunk has some (fixed) buttons, when you click on one button (lets say <button>width 768px</button>) the wrapper gets width 768px (by some js code). This way I simply can see whats happening when my browsersize is 768px width.

After this is done maybe some cookie and reset button can be added but this is not the most important.
I know there are ready to use scripts but haven't found any good ones yet.

This is what I wanted to do:
http://fiddle.jshell.net/fourroses666/dDG3L/2/

But this doesn't change the viewport / browsersize so everything can be trown into the trashcan
Didn't thought about that.. I think only some iframe / frameset can do this

[ed. note: fourroses666 last edited this post 10 years, 1 month ago.]

something like this maybe? http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/

Thanks but it is not really where I'm looking for.
Guess I will have to manually change my browser size :@
(That is the one I used some year ago.)

iof you use Crhome there is an addin that has all the usual sizes called 'Window Resizer' thats what i use.

YES, correct, I see Firefox has one too.
CTRL SHIFT M

Wanted to build it myself

I know this won't help but you can also use: http://www.resizemybrowser.com

Or do something like this: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_resizeto

hmm, yea that might be possible indeed, creating buttons which opens the same page in a popup in different sizes, thanks. Gona try to make something out of that.

If you go into the Chrome inspector, there should be an emulation tab that lets you test viewport sizes on different devices. Just make sure to refresh after changing the viewport size.

This will emulate user agents and screen size (also sensors for swipe commands)

Firefox's CTRL SHIFT M isn't very good as it doesn't actually change user agents, so sites that rely on that type of thing aren't effected.

Edit:
The problem with your example is it doesn't adjust the viewport (which effectively is what responsive design is adjusting to).

When you use media queries to adjust content for the viewport size, you'll need to adjust the viewport, not just the DOM element.

Just in case you're not aware of this tool (sure it's not a "simple button") – very useful I think: ghostLab http://vanamco.com/ghostlab/