How to Fix/Solve the Website Screen Resolution Problem ?

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 about

adjusting 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.
}

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.


$(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.

Was this Information helpful?

Yes No

16 comments:

Anonymous10 April 2014 at 12:39
can you please explain where to write the script tags for jquery and the javascript code??
Unknown9 December 2014 at 13:03
GREAT HELP!!!!! Thank You. I do have one issue. I am using jqwidget grid and when I try to move a column or resize a field the focus of the cursor is skewed making this option unusable. Please advise.
Unknown10 December 2014 at 08:36
I was able to fix the problem. I needed to isolate the jqwidet into an iframe. Your fix works great! Thank you again very much for sharing this code.
sumedh patil9 January 2015 at 03:05
thnx bro ,its working
Unknown21 February 2015 at 03:46
sorry,i can't understand.can you please explain to clearly.
Unknown21 April 2015 at 05:56
This comment has been removed by a blog administrator.
Anonymous15 August 2015 at 23:48
Thanks for article...... It's working perfectly.
Anonymous11 February 2018 at 20:26
Thanks bro...this save my project
Anonymous27 February 2018 at 23:11
where to paste in wordpress site
Tony22 June 2018 at 22:12
Hi
Can you please tell me how to achieve this in wysiwyg web builder? I have used wysiwyg to design the pages.
Anonymous11 June 2019 at 03:42
Hai
Iam using Angular6 can you exsplain in Typescript??
affan saeed6 June 2020 at 22:31
still not working and when i change resolution for checking the layout all it seem looking bad and layout is not in his position.

This BLOG is not managed anymore.

Ronak's

Pages