Search code examples
cssresizescale

Auto scale page so it fits the screen

I have a site where I think Most of my users are using desktop or laptop while they are on my site. The problem is that on some screens its only 1/4 of the screen begin used and rest is just background. How can I make it auto scale, so it fits the screen's size??

Solution

  • You can use css3 transform:

    -webkit-transform: scale(0.5);  /* Chrome, Safari 3.1+  */
-moz-transform: scale(0.5);  /* Firefox 3.5-15 */
-ms-transform: scale(0.5);   /* IE 9 */
-o-transform: scale(0.5);    /* Opera 10.50-12.00 */
transform: scale(0.5);

    Calculate the scale ratio and apply the rules with this ratio in your script.

    Do not forget to set left and top property of the transformized element as the offset ratio of the full width and height:

    offsetRatio = (ratio - 1) / 2;