CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1507558
user1507558

Reputation: 454

Resize web page to fit screen

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

Upvotes: 0

Views: 17078

Answers (4)

sundeep sharma
sundeep sharma

Reputation: 207

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.

Upvotes: 0

Janmejay Agrawal
Janmejay Agrawal

Reputation: 74

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.

Upvotes: 2

Ryan Brackett
Ryan Brackett

Reputation: 1022

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

Upvotes: 0

Sobin Augustine
Sobin Augustine

Reputation: 3775

you can use this, put the whole content inside it

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

Upvotes: 0

Related Questions