Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Responsive Screen Resolution

DZone's Guide to

Responsive Screen Resolution

· Mobile Zone ·
Free Resource

Responsive design tutorials have not helped me fix screen resolution problems for my website.  The solution was hiding right in the specifications for CSS. There is a property called scale, which can scale the size of any element in the document.  For example, we have following <div> tag.

<div id ="t_div"></div> 
Now we can scale the size of the <div> using this mozilla prefix:
#t_div
{
-moz-transform:scale(1.5,1.5); //for Firefox
}
The code above will increase the size of <div> by x1.5.

If you have a fixed width and height for your site (e.g. 1280 x 768, 1366 x 768 etc.), you can use this property of CSS to scale your website's main <html> tag. But we have to scale <html> tag dynamically according to screen size.  So we want to use jQuery here to apply CSS property dynamically.

Step - 1:

Add the following CSS to your index page (you have to do it for every page of your site).

html{
   position:absolute;
 margin:0px;
  padding:0px;
}
body{
   position:absolute;
 padding:0px;
 margin:0px; 
}

Step - 2:

Link the jQuery to your link page. You can download the local copy of jQuery OR link the online jQuery by using following tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> 
Step - 3:

Now copy the following code into your application's JavaScript document.


$(document).ready(function() {

//Other code ...

/*HEIGHT and WIDTH below is your screen size not the your browser's
inner Size. AND if your width is 1280px then replace WIDTH by 1280.0 
(Note 0 after point)in the code below and same for HEIGHT.*/

factor_x = ($(window).width()) / WIDTH;
temp = (($(window).width())*HEIGHT/ WIDTH);
factor_y = temp/HEIGHT;
('html').css("transform","scale("+factor_x+","+factor_y+")");  
//For Firefox
$('html').css("-moz-transform","scale("+factor_x+","+factor_y+")"); 
      
//For Google Chrome
$('html').css("-webkit-transform","scale("+factor_x+","+factor_y+")");

//For Opera
$('html').css("-o-transform","scale("+factor_x+","+factor_y+")");

});
After doing this properly, check your website for various resolutions. It should work.

What we are doing is scaling the <html> tag with jQuery, keeping the aspect ratio of the screen constant.

You can also use the simple JavaScript instead of jQuery.


Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}