Auto scale page so it fits the screen

Question

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??

Answer 1

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;

Answer 2

You would need to use CSS "responsive designs". You can find some examples here:

http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756

Basically, you use min-width / max-width, and @media to decide what to show, and how.

If you are not comfortable doing that kinda stuff, then Bootstrap is a good way to accomplish this, with the minimum of effort:

http://getbootstrap.com/

Answer 3

.wrapper { max-width:1000px; margin:0 auto; }

wrapper - is the main container of your site