调整网页大小以适合屏幕

Question

I have a website which I want to follow the resizing of the browser window so that it always fits. I tried using css transform scale property with a ratio given by current window width divided by full-screen window width. It does re-scale but there must be something wrong with it because it leaves white blocks to the left and the right of the content (so it shrinks the site too much and then centers in in the window) Here is the javascript code:

$(window).resize(function(){
           var ratio = $(window).width()/1340;
                $('body').css('transform','scale('+(ratio)+')');
                $('body').css('-ms-transform','scale('+(ratio)+')');
                $('body').css('-moz-transform','scale('+(ratio)+')');
                $('body').css('-webkit-transform','scale('+(ratio)+')');
   });

Is there a better way to make the page fit the window (or make the scaling scale properly)?

Answer 1

To make your website mobile friendly, you should really think about making it responsive using media queries or using some front-end framework like Bootstrap, Foundation etc.

Or if you just want to scale your website so it should not horizontally scale and fit to user's screen (No matter how small your UI component become) You can do that by adding following meta tag in your head section.

<meta name="viewport" content="width=device-width, initial-scale=1">

It'll force browser to keep the website scale enough to fit the mobile screen width.

Hope It'll help.

Answer 2

you can use this, put the whole content inside it

#wrapper{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
}

Answer 3

What you're wanting to do is build the website using Responsive and Adaptive methods. See if this link helps! http://www.imediaconnection.com/content/33435.asp#singleview

Answer 4

Use

<meta name="viewport" content="width=device-width,initial-scale=1.0">

in Html head section and

@media only screen and
(min-device-width : screen px) and
(max-device-width : screen px) {
    #id{style}
}

in CSS.