What do you know. I updated Firefox from Firefox itself and it only updated me to 12.
Google Chrome has it built into the inspector as well, however it is not nearly as fancy as the one found in Firefox.
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.
Interesting. It seems Chrome doesn't support X-Frame-Options
Not true. Chrome definitely supports x-frame-options (I believe the code for that is part of webkit and is shared with safari).
Well i based my hypothesis on the fact that sites such as google.com and yahoo.com which dont get rendered in Safari as a result of X-Frame-Options do get rendered in Chrome.
You either have an ancient version of chrome, or have disabled some pref in chrome to allow these sites to get rendered.
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.
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.
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 :)
A browser is a browser.
so i guess that would make my responsiveness checker unresponsive
Guess so
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?
Its easier to match the aspect ratio using this tool vs scaling down a browser (how do you know the dimensions of your browser?)
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.
The aspect ratio is consistent - which, in my opinion, is what's important.
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.
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
This a very good hack. Kudos for it!
Unfortunately, this doesn't appear to render pages the same as Apple devices.
If you use Safari (on OS X), you'll get a much closer rendering to the actual device.
Looks like there aren't any Android options. That's a shame.
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) :)