Show HN: Test your website's responsiveness (opens in new tab)

(mobilewebsim.jonahkatz.me)

27 pointsjak119212y ago42 comments

42 comments

stack0v3erfl0w12y ago

There is a similar tool built into Firefox (Tools -> Web Developer -> Responsive Design View)

jak1192OP12y ago

Didn't know that. That's pretty cool. However, its only for Firefox 15 which isn't available for mac yet..

stack0v3erfl0w12y ago

It is available for Mac! The latest available version is Firefox 21.0 (stable channel).

http://www.mozilla.org/en-US/firefox/all/

1 more reply

sahaskatta12y ago

Google Chrome has it built into the inspector as well, however it is not nearly as fancy as the one found in Firefox.

amwelles12y ago

Neat tool, but... Should we be targeting specific devices? Shouldn't things look awesome at any screen size? Like somebody already mentioned [1], this doesn't include Android options, Windows phone, or anything else.

[1] https://news.ycombinator.com/item?id=5928448

jak1192OP12y ago

Good point. But if one wanted his site to look awesome on any screen size, he could use this tool to confirm that it does.

wholalotta12y ago

it doesnt work. I checked my website from my iphone4s and from your tool. They are not the same.

scrrr12y ago

Same here. CSS Media Queries are not respected. Looks alright on phone, but this test-website is showing the default desktop-version.

jak1192OP12y ago

Hmm. What's your website?

nopal12y ago

http://www.louiewatch.com looks different on my iPhone 5 and your site (accessing site using Safari 6.0.5 on OS X 10.8.4).

marban12y ago

http://screenqueri.es is the much better choice (if you really want to skip the test in an actual emulator)

jak1192OP12y ago

That's cool!

fady12y ago

yeah, that worked well for me. pretty quick too.

tehwebguy12y ago

Looks pretty cool! Side note, I just learned about X-Frame-Options as a result of entering http://google.com in the form box using Safari

https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Option...

jak1192OP12y ago

Interesting. It seems Chrome doesn't support X-Frame-Options

anondesign12y ago

Not true. Chrome definitely supports x-frame-options (I believe the code for that is part of webkit and is shared with safari).

1 more reply

mmahemoff12y ago

You can also go into Chrome devtools, Settings, Overrides. Then you can set the User Agent, which will also update the screen resolution. You can emulate touch events there as well.

websitescenes12y ago

I skim hacker news on my iPhone and I couldn't see anything in the emulation. I'll have try later on my desktop. Thanks for sharing.

jak1192OP12y ago

The point of the site is to simulate how websites would look on an iPhone. So being you're on an iPhone, use of the site would be counterintuitive :)

websitescenes12y ago

A browser is a browser.

1 more reply

paul929012y ago

Is there a difference in using this tool vs. seeing how it looks as I scale my browser down to iPad, Android and iPhone size?

jak1192OP12y ago

Its easier to match the aspect ratio using this tool vs scaling down a browser (how do you know the dimensions of your browser?)

jusob12y ago

You can also check http://mobilito.net/

apolymath12y ago

i have to say that this preview thing is bullshit. For example, your web-based iPad viewing size is only 582px wide, when in all reality, the iPad is 1536px wide. Sorry, but this little test is an epic fail.

jak1192OP12y ago

The aspect ratio is consistent - which, in my opinion, is what's important.

sahaskatta12y ago

The aspect ratio of the browser's viewport and of the device's display IS NOT the same. (That applies to portrait and landscape too.) The interface elements at the top and bottom skew that quite a bit.

fady12y ago

do you know why a html file in my dropbox public folder would not display on your site? dropbox public links work well in browsers. i use it a lot for dev stuff

denzil_correa12y ago

This a very good hack. Kudos for it!

nudetayne12y ago

Unfortunately, this doesn't appear to render pages the same as Apple devices.

ancarda12y ago

If you use Safari (on OS X), you'll get a much closer rendering to the actual device.

MostAwesomeDude12y ago

Looks like there aren't any Android options. That's a shame.

jak1192OP12y ago

Most Android aspect ratios are covered by the Apple devices I implemented. The Galaxy s4 for instance has a 16:9 aspect ratio, the same as the iPhone-5. However, more devices are to come! Feel free to contribute on Github (https://github.com/jak1192/MobileWebSimulator) :)

aw3c212y ago

Most Android browsers actually reflow text to fit the screen, just like mobile browsers should. I don't think this website could simulate that.

marban12y ago

again: http://screenqueri.es

jak1192OP12y ago

Maybe I should put a chart of common device aspect ratios..

marban12y ago

no need — there's an option for ARs at http://screensiz.es

1 more reply

j / k navigate · click thread line to collapse

42 comments

stack0v3erfl0w12y ago

There is a similar tool built into Firefox (Tools -> Web Developer -> Responsive Design View)

jak1192OP12y ago

Didn't know that. That's pretty cool. However, its only for Firefox 15 which isn't available for mac yet..

stack0v3erfl0w12y ago

It is available for Mac! The latest available version is Firefox 21.0 (stable channel).

http://www.mozilla.org/en-US/firefox/all/

1 more reply

sahaskatta12y ago

Google Chrome has it built into the inspector as well, however it is not nearly as fancy as the one found in Firefox.

amwelles12y ago

[1] https://news.ycombinator.com/item?id=5928448

jak1192OP12y ago

Good point. But if one wanted his site to look awesome on any screen size, he could use this tool to confirm that it does.

wholalotta12y ago

it doesnt work. I checked my website from my iphone4s and from your tool. They are not the same.

scrrr12y ago

Same here. CSS Media Queries are not respected. Looks alright on phone, but this test-website is showing the default desktop-version.

jak1192OP12y ago

Hmm. What's your website?

nopal12y ago

http://www.louiewatch.com looks different on my iPhone 5 and your site (accessing site using Safari 6.0.5 on OS X 10.8.4).

marban12y ago

http://screenqueri.es is the much better choice (if you really want to skip the test in an actual emulator)

jak1192OP12y ago

That's cool!

fady12y ago

yeah, that worked well for me. pretty quick too.

tehwebguy12y ago

Looks pretty cool! Side note, I just learned about X-Frame-Options as a result of entering http://google.com in the form box using Safari

https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Option...

jak1192OP12y ago

Interesting. It seems Chrome doesn't support X-Frame-Options

anondesign12y ago

Not true. Chrome definitely supports x-frame-options (I believe the code for that is part of webkit and is shared with safari).

1 more reply

mmahemoff12y ago

You can also go into Chrome devtools, Settings, Overrides. Then you can set the User Agent, which will also update the screen resolution. You can emulate touch events there as well.

websitescenes12y ago

I skim hacker news on my iPhone and I couldn't see anything in the emulation. I'll have try later on my desktop. Thanks for sharing.

jak1192OP12y ago

The point of the site is to simulate how websites would look on an iPhone. So being you're on an iPhone, use of the site would be counterintuitive :)

websitescenes12y ago

A browser is a browser.

1 more reply

paul929012y ago

Is there a difference in using this tool vs. seeing how it looks as I scale my browser down to iPad, Android and iPhone size?

jak1192OP12y ago

Its easier to match the aspect ratio using this tool vs scaling down a browser (how do you know the dimensions of your browser?)

jusob12y ago

You can also check http://mobilito.net/

apolymath12y ago

jak1192OP12y ago

The aspect ratio is consistent - which, in my opinion, is what's important.

sahaskatta12y ago

fady12y ago

do you know why a html file in my dropbox public folder would not display on your site? dropbox public links work well in browsers. i use it a lot for dev stuff

denzil_correa12y ago

This a very good hack. Kudos for it!

nudetayne12y ago

Unfortunately, this doesn't appear to render pages the same as Apple devices.

ancarda12y ago

If you use Safari (on OS X), you'll get a much closer rendering to the actual device.

MostAwesomeDude12y ago

Looks like there aren't any Android options. That's a shame.

jak1192OP12y ago

aw3c212y ago

Most Android browsers actually reflow text to fit the screen, just like mobile browsers should. I don't think this website could simulate that.

marban12y ago