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

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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.


Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Published at DZone with permission of Ronak Khunt. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}