Tool To Test Your Responsive Design

Really amazing, thanks for sharing !

WOW !!!

It has serious difference while testing on my iPad and when when simulating iPad on this site

seal said
It has serious difference while testing on my iPad and when when simulating iPad on this site

There can be a difference around 20px in width [ depends upon your design ] as vertical scrollbar shows up. this difference will be on windows machine & firefox mainly as chrome, safari have implemented iOS styled scrollbars for mac.

I’m looking a fix for eliminating this issue but haven’t really come up with something great..

I’m not sure but I guess all other tools also suffers from this issue.

Anyways, Can you post me a link So that I can compare it on my iPad with this tool & perhaps look for scope to improve this tool.

Thanks,

- Mandar

Great tool!

QuadCodes said

seal said
It has serious difference while testing on my iPad and when when simulating iPad on this site

There can be a difference around 20px in width [ depends upon your design ] as vertical scrollbar shows up. this difference will be on windows machine & firefox mainly as chrome, safari have implemented iOS styled scrollbars for mac.

I’m looking a fix for eliminating this issue but haven’t really come up with something great..

I’m not sure but I guess all other tools also suffers from this issue.

Anyways, Can you post me a link So that I can compare it on my iPad with this tool. & perhaps look for scope to improve this tool.

Thanks,

- Mandar

I’m speaking about iPad 1 – 1024×768

QuadCodes said

This could be a little bit more complex but if I choose iPhone for instance you parse the selected site with the user agent of an iPhone and display the result in the frame – got it?

Hmm.. Not very clear.. Can you elaborate more ???

Ok I’ll try:

If you open a web page each browser sends it’s user agent string to the server. This identifies the browser and the OS. Depending on this information you servers can sent different pages back to the user. Normally you cannot change this string within the browser settings (or you need some extensions) so you could use CURL to get the “correct” website with a fake user agent string.

seal said

QuadCodes said

seal said
It has serious difference while testing on my iPad and when when simulating iPad on this site

There can be a difference around 20px in width [ depends upon your design ] as vertical scrollbar shows up. this difference will be on windows machine & firefox mainly as chrome, safari have implemented iOS styled scrollbars for mac.

I’m looking a fix for eliminating this issue but haven’t really come up with something great..

I’m not sure but I guess all other tools also suffers from this issue.

Anyways, Can you post me a link So that I can compare it on my iPad with this tool. & perhaps look for scope to improve this tool.

Thanks,

- Mandar

No, it’s not about scrolls. When I opened this: http://www.byseal.com/store/purple/index.html though the site it shows me that a serious portion of the layout, almost 1/3 of it, is not visible in portrait mode. In fact on my iPad I see everything. I think the reason is that you just show only 768px in your preview while the way iPad works (this is just guessing based on tests so I might be wrong) is that it shrinks the content that fits 1024 to fit 768 when you are in portrait mode. In other words, no matter how you rotate your iPad, you see the same amount of info. I’m speaking about iPad 1 – 1024×768

I suggest to open the webpage with safari, go to the developer menu and change the user agent to “iPad”. The initial scale and the scaling options in general are set with the viewport meta tag in the head section

seal said

QuadCodes said

seal said
It has serious difference while testing on my iPad and when when simulating iPad on this site

There can be a difference around 20px in width [ depends upon your design ] as vertical scrollbar shows up. this difference will be on windows machine & firefox mainly as chrome, safari have implemented iOS styled scrollbars for mac.

I’m looking a fix for eliminating this issue but haven’t really come up with something great..

I’m not sure but I guess all other tools also suffers from this issue.

Anyways, Can you post me a link So that I can compare it on my iPad with this tool. & perhaps look for scope to improve this tool.

Thanks,

- Mandar

No, it’s not about scrolls. When I opened this: http://www.byseal.com/store/purple/index.html though the site it shows me that a serious portion of the layout, almost 1/3 of it, is not visible in portrait mode. In fact on my iPad I see everything. I think the reason is that you just show only 768px in your preview while the way iPad works (this is just guessing based on tests so I might be wrong) is that it shrinks the content that fits 1024 to fit 768 when you are in portrait mode. In other words, no matter how you rotate your iPad, you see the same amount of info. I’m speaking about iPad 1 – 1024×768

You are facing this issue because link you sent me is NOT Responsive Design. This tool can only be used to test CSS3 Media-Queries [ Responsive Design ]

So, It won’t work for regular sites.

Thanks.

QuadCodes,

this is an AWESOME tool, hats off

One suggestion (but I don’t know if this is going to kill browser ) make a button that opens all iframes next to each other so one can have a quick look at all versions. Yes I know, it will be 67585893457 pixels wide