johnpolacek/responsivator

Website for viewing and sharing how web pages look at different screen sizes

Responsivator!

See and share how web pages look at different screen sizes

by @johnpolacek

With Responsivator!, you can paste in any page and see how it looks at various screen resolutions.

Now, say you want to share this page. Just copy the link from the share field and send. If you want to hide the header & controls, just check the box and you will be able to send a link that is nice and clean with just the frames.

Responsivator! is built upon fine work done by others like Matt Kersley, Benjamin Keen and lensco.

Responsivator! also uses 2 jQuery plugins, also created by @johnpolacek - jQuery Framer and jQuery Configurator - so check those out too.

responsivator's Issues

Wrong Twitter icon

The right one is available at https://twitter.com/images/resources/twitter-bird-16x16.png

Twitter URL is wrong

This is a very useful tool, thank you! Just wanted to point out that the Twitter icon links to http://dfcb.github.com/responsivator instead of http://dfcb.github.com/Responsivator. URIs be case sensitive and stuff ;)

Add the option to show the size with the browser top bar visible

... i.e so that the 320 × 480 Phone (portrait) size has offsets / masks for 320px × 356px.

I guess it could be as simple as resizing the on screen boxes via a tick box, or actually showing a fake top bar.

Someone has Sizes for iPhone listed here - https://gist.github.com/1231476

My website don't looks in a responsive way.

I've test my website in your app but it didn't load responsive css.
Instead in my iphone and android phones it works properly, anybody knows what I'm doing wrong?
My website is www.rickymignanego.com

Scroll Bar Causing Screen size to be incorrect.

On my iPhone the scroll bar lays on top of the content. In Responsivator the scroll bar pushes the content to the left causing the viewport to be about 20px smaller than it would be on the iPhone. I would love to have an option to place the scroll bar outside of the viewport.

No JavaScript option

It would be really cool if you could disable JavaScript too.

doesn't allow parameters in urls

example:
http://dfcb.github.com/Responsivator/?site=http://sweethatclub.org/?par=val
doesn't work

But I noticed that
http://dfcb.github.com/Responsivator/?site=http://sweethatclub.org/?par
works fine

Include URL to responsivator in the blurb

This is a really tiny thing, but could you include the the URL to responsivator (https://github.com/dfcb/Responsivator/) in the blurb that says "Website for viewing and sharing how web pages look at different screen sizes"? It makes it really easy to go to the site, instead of scrolling down and looking for the link in the Readme. Thanks!

Detection of websites using X-Frame-Options

When I tried this on my personal website, I freaked out for a couple of seconds because nothing was displayed. I eventually realized that this was because I was using X-Frame-Options to prevent clickjacking.

I found a StackOverflow answer showing a method to detect X-Frame-Options client-side. Would you consider integrating it?

iframe 16px wider

I noticed the iframes are 16px wider than advertised? eg the 320 is 336. If you click customize and then hit finish the iframes are the right size.

Better support HTTPS

[blocked] The page at 'https://johnpolacek.github.io/Responsivator/' was loaded over HTTPS, but ran insecure content from 'http://www.auctionsbycellular.com/': this content should also be loaded over HTTPS.

I also tried to run my site through the tool and had to click "Allow Unsafe Script" to get it to work.

HTTPS Everywhere helps test issues like these.

Add options

I would be nice if we could refresh just one screen size at a time instead of all the windows. It would also be handy if you could put a checkbox that denoted a horizontal scrolling website. With this option, the browser main window would not scroll up and down when using the mouse wheel, but scroll the site the mouse is over horizontally, like with your scrollorama script which I am using currently.

Thank you for all your efforts.
Great stuff!

Best,
Design Drumm

Unable to click on any links within the Responivator iframes

Not sure why, but I'm unable to click on any links within the Responsivator iframes. I can right click on a link and select open link in another tab, but cannot directly click on a link.

Any easy ways to fix this?

Cannot scroll sideways in Chrome on Mac OS X

For some reason I cannot scroll sideways, so I can't see the landscaped tablet view only half of it.

I'm on Mac OS X, with Chrome 23.0.1271.101.

Regards
Morten

iframe sync

it should be nice to have a iframe sync, when you navigate to another link on any iframe, it would reload the rest of the iframes.