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


9 comments:

  1. can you please explain where to write the script tags for jquery and the javascript code??

    ReplyDelete
    Replies
    1. You can put whole javascript code in one .js file and then link this file using src attribute of script tag in webpages that you want to fix.
      Same thing you can do with CSS code.

      Delete
  2. 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.

    ReplyDelete
  3. 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.

    ReplyDelete
  4. sorry,i can't understand.can you please explain to clearly.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. Thanks for article...... It's working perfectly.

    ReplyDelete