CODEWITHSUNDEEP
htmlcssbrowserresizewindow
Deleted
Deleted

Reputation: 39

Change div size to scale when window resized

Basically, I have a div that contains my entire website. it has a height of 625px and a width of 1250px. Is there any way to resize this while keeping the scale when the browser window is resized or its used on a mobile/tablet? I know someones gonna say use % instead of px but I have a very controlled UI.

Also is there anyway to bring up a pop up when the websites used in a certain browser?

Thanks

Upvotes: 2

Views: 8100

Answers (2)

Ian Davis
Ian Davis

Reputation: 109

For whatever reason you are doing it you can use this (using JQuery):

$(window).resize(function() {
    resizeSite();
});

function resizeSite(){
    var winH = $(window).height();
    var winW = $(window).width();
    // you will want to do some stuff here for deciding what to do and when...
    // when the window size is too small shrink the site using your ratio
    // when the window is larger increase the size of your site i.e.
    // Height = Width / 2
    // Width = Height * 2
    var tgtW =  winH * ratio;
    var tgtW =  winH * ratio;
    $("#siteContainer").height(tgtH).width(tgtW);
}

And add a call to the function on load as well. I think doing this would probably create you even more issues though as this would just shrink the size of the containing element, what happens to the content of it? If it was scaled down to fit on a mobile phone in portrait the display would be tiny and pointless, what would the layout inside it be?

Upvotes: 2

Smurker
Smurker

Reputation: 714

The best and most straightforward answer is to use %, simply because this is the intended use. I'd really advise you to rework your layout so the percentage sign can be used.

If this does not work for you, there is always Media Queries http://www.w3.org/TR/css3-mediaqueries/ or Javascript as pointed out by @sable-foste and @abdul-malik.

Upvotes: 2

Related Questions