This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Full Screen website Zoom using css-transform scale and jQuery
By North Street, A Creative Studio
If the design calls for “zooming” in to the width of the browser, with everything scaling up proportionally, text & images included, then this bit of code is for you!
Check out the codepen example here.
I call it, nsZoomZoom.
Match the body width, let’s say 1000px in this example, to the PSD design and essentially code the site like it’s 1999, as a fixed width layout. Then, with a little sprinkle of jQuery, when the browser window is increased to a size larger than 1000px, you’ll adjust the css transform scale function to “zoom” into the site.
For sizes lower than 1000px, you’ll just use regular media queries. This method should be compatible down to IE9 (but worst case, the design just maxes out to 1000px then.)
With the time you saved, go have a Gallus.
<html>
<body>
<header>
<h1>Some Big Feature headline</h1>
</header>
<div>
<h2>More stuff</h2>
<img src="http://placekitten.com/g/600/400">
</div>
<div>
<h2>Another Box</h2>
<img src="http://placekitten.com/g/400/400">
</div>
</body>
</html>
html, body {
width: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
width: 1000px;
}
img {
width: 100%;
}
header {
width: 100%;
background-color: pink;
}
div {
float: left;
width: 60%;
background-color:green;
}
div+div {
width: 40%;
background-color: teal;
}
header h1, div h2 {
padding: 12px;
}
body {
background-color:lightblue;
-ms-transform:scale(1); // Req for IE9
transform:scale(1);
}
jQuery(document).ready(function($){
nsZoomZoom();
$( window ).resize(function() {
nsZoomZoom();
});
function nsZoomZoom() {
htmlWidth = $('html').innerWidth();
bodyWidth = 1000;
if (htmlWidth < bodyWidth)
scale = 1
else {
scale = htmlWidth / bodyWidth;
}
// Req for IE9
$("body").css('-ms-transform', 'scale(' + scale + ')');
$("body").css('transform', 'scale(' + scale + ')');
}
});
About north street
We engineer the thoughtful transformation of great organizations. Our proven process helps us understand what your competitors are doing right — and wrong. Want to learn more? Let’s chat.