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

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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.


Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}