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

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

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.


Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}