how to fix/solve your website to support all screen resolution
TRANSCRIPT
How to Fix/Solve the Website Screen Resolution Problem ?
By: Ronak KhuntKhuntronak.blogspot.com
Intro…For long times I have been looking for solution to fix my
Website Resolution problem. as per Screen Size of any resolution.
We know that fixing your site to support all screen resolution or dynamically adjust to all screen resolution is tedious task.
But with this solution, I think it will be easy to support all screen resolution according to user’s screen resolution.
Solution is even more easier than it look.
CSS scale property…CSS Provides property named scale which can scale the
size(width x height) of any element in the web document/ webpage.
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 .
Approaching solution…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(scale) 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.
We are going to use jQurery for our purpose.
Step - 1:Apply the following CSS to your index page or any webpage.
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 to in your JavaScript.(Read Comments carefully)
$(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+")"); });
Explanation…What we are doing is scaling the size of <html>
tag(Area covered by html) Up or Down, keeping aspect ratio of screen constant. Now that’s simple math you can understand.
ReferenceFor more Details Visit:
http://khuntronak.blogspot.com/2013/12/how-to-fixsolve-screen-resolution.html
Questions…In case of any difficulty please comment below.
You can also contact me at: [email protected]