CODEWITHSUNDEEP
javascriptjquery
Df Interaction
Df Interaction

Reputation: 31

Get Browser Width Regadless of Zoom

I'm working on a website that has a full screen layout. When I zoom out I would like to keep the layout the same and shrink all the content.

I need the max-width of my page container to be whatever the browser width is (without zoom factored in)

I thought this would have been easy with this:

function zoomify(){

    var htmlDocWidth = $( window ).width();

    $('.page-wrap').css( 'max-width',htmlDocWidth );

};

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

zoomify();

but $( window ).width() seems to change based on zoom. Is there a way to get the width of the users browser window without zoom factored in?

Upvotes: 2

Views: 2310

Answers (2)

Df Interaction
Df Interaction

Reputation: 31

Figured it out

function zoomify(){

    var htmlDocWidth = window.outerWidth;

    $('.page-wrap').css( 'max-width',htmlDocWidth );

};

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

zoomify();

Upvotes: 1

void
void

Reputation: 36703

You can use:

$('.page-wrap').css( 'max-width','100vw' );

Here vw is a unit which means the width of viewport, for height you can use vh.

Upvotes: 2

Related Questions