For long times I have been looking for solution to fix my
Website Resolution problem
. Initially I tried all the responsive design and all that, But nothing works. Then a thought pop up in my Mind aboutadjusting website resolution
as per Screen Size of any resolution.Solution is even more easier than it look.
CSS Provides property named scale which can scale the size(width x height) of any element in the document.
For example, <div id ="t_div"></div>
Now we can scale the size of the division as follow:
#t_div
{
-moz-transform:scale(1.5,1.5); //for Firefox
}
Above code will increase the size of division by x1.5 .
First of all suppose that you have your Website designed for fix size say, WIDTH x HEIGHT(e.g. 1280 x 768, 1366 x 768 etc.).
Now we will use this property of CSS to scale our website's main Tag(<html>) to adjust size according to screen size.
But we have to scale <html> tag dynamically according to screen size. For this we will use jQuery-a javascript library, to
apply CSS Property dynamically
. Step - 1:Apply the following CSS to your index page.
html{
position:absolute;
margin:0px;
padding:0px;
}
body{
position:absolute;
padding:0px;
margin:0px;
top:0px;
left:0px;
//set height and width property at its maximum size in 'px' value.
}
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>
Now copy the following code to in your javascript.
$(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;
factor_y = ($(window).height( ))/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 thing properly, Check your Website for various resolution. It should work.
What we are doing is scaling the <html> tag Up or Down, keeping aspect ratio of screen constant.
In case of any difficulty please comment below.
