justincavery / am-i-responsive Goto Github PK
View Code? Open in Web Editor NEWA high fidelity preview of your responsive design across Desktop, Laptop, Tablet and Mobile.
License: MIT License
A high fidelity preview of your responsive design across Desktop, Laptop, Tablet and Mobile.
License: MIT License
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-->
Chrome shows scrollbars
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.
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
It would be cool if the app would allow you to export a screenshot.
Great idea!
When using the tool on a website that only allows HTTPS connections the tool does not seem to work.
Line 142 in a46ac86
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);
}
});
}
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.
hi
under which license the code is released ?
thanks
itamar
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.
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]-->
is updating the device images something you would accept a pull request on?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.