justincavery / am-i-responsive

A high fidelity preview of your responsive design across Desktop, Laptop, Tablet and Mobile.

Hi there 👋

am-i-responsive's Issues

Website link redirecting to website

Hey Guys,

When you input a URL into the search bar and click on Go! it sends us through to the website that we put into the search bar.
It will preview the iamresponsive screenshot but only for about .1 seconds then sends us through to the website.

Wondering if you guys can fix this ASAP.

updating device images

is updating the device images something you would accept a pull request on?

Problem with border-radius and background-color

Thanks for the "Am I responsive" page!! Great work.

Found an issue:
You can see it with this site:
http://tinyurl.com/kv9xuvv
the "balls" on the yellowish background shoudl be round - well they are here but the background-color is still a square around... originally in the browser it's fine, just in your preview not!

cheers

iframes too long when viewing on iphone and ipad

The iframes are longer than the device height when you view on the mobile and tablets.

This seems to be an issue with the devices itself, not sure why it is.

Integrate Front End Performance Results

I want to add a checkbox next to the input field that will allow you to also pass the url across to Google page speed or something similar to get reports back on the front end performance.

Useful function

Hi,
just want to share a useful function in developing responsive web pages. It shows you the current width of the window.

//Choose if you want the window width to display - 1 = yes, 0 = no
        var showWidth = 1;

        if(showWidth == 1){
            $(document).ready(function (){
                $(window).resize(function(){
                    var width = $(window).width();
                    document.getElementById("output_width").innerHTML='Window Width:'+width.toString();
                });
            });
        }

<div id="output_width"></div><!--Widow width inserted here-->

Added "transform: scale" for IE 6 – 8

Hi, great tool!

I added some code to make "transform: scale" work in IE 6 – 8, too (tested in IE 7 and 8).

<!-- index.html 
Add "transform: scale" for IE 6 – 8 via http://www.useragentman.com/IETransformsTranslator/ -->

<!--[if IE 8]>
<style> 

.desktop iframe {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.3181, M12=0, M21=0, M22=0.3181, SizingMethod='auto expand')";
}

.laptop iframe {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.277, M12=0, M21=0, M22=0.277, SizingMethod='auto expand')";
}

.tablet iframe {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.234, M12=0, M21=0, M22=0.234, SizingMethod='auto expand')";
}

.mobile iframe {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.219, M12=0, M21=0, M22=0.219, SizingMethod='auto expand')";
}

</style>
<![endif]-->    


<!--[if lte IE 7]>
<style>

.desktop iframe {
    filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.3181,
    M12=0,
    M21=0,
    M22=0.3181,
    SizingMethod='auto expand');
}

.laptop iframe { 
    filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.277,
    M12=0,
    M21=0,
    M22=0.277,
    SizingMethod='auto expand');
}

.tablet iframe {
    filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.234,
    M12=0,
    M21=0,
    M22=0.234,
    SizingMethod='auto expand');
}


.mobile iframe {
    filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.219,
    M12=0,
    M21=0,
    M22=0.219,
    SizingMethod='auto expand');
}

</style>
<![endif]-->

XSS Vulnerability

Payload

• http://ami.responsivedesign.is/?url=javascript:alert(1)
• http://ami.responsivedesign.is/?url=data:text/html,<script>alert(1)</script>
• http://ami.responsivedesign.is/?url=data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg==
• ...

Fix

am-i-responsive/index.html

Line 142 in a46ac86

if(first === "undefined") {

if(first === "undefined" || first.indexOf('http') === -1) { // Non http(s) protocol
  // don't do anything.
}
else {
//  take the url variable and update the iframes and input field
  $("iframe").attr('src',(first));
  $('#url').attr('value',(first));
  $.ajax({ url: 'xtest.php?url=' + first + '',
           data: {action: first},
           type: 'post',
           success: function(output) {
                        console.log(output);
                    }
  });
}

Screenshot

It would be cool if the app would allow you to export a screenshot.

Great idea!

Please add LICENSE

Dear @justincavery,

i really like thiss webapp, it is still useful to generate beautiful screenshots.

Could you please add a LICENSE-file or a statement in the README und which license you published the source code?

If you do not know which to choose, let me recommend GPLv3+, this will ensure that every enhancement will be free and open source, too.

I would like to reuse some parts for a own project, but a missing license is currently a legal issue :-(

Regards

Remove scrollbar from phone and tablet view

Chrome shows scrollbars

License ?

hi

under which license the code is released ?

thanks
itamar

SSL/TLS protocol support

When using the tool on a website that only allows HTTPS connections the tool does not seem to work.