3

I am using $(window).width() and $(window).height() to get the width and height of the webview, but these always return me the same value and the real width and height of the entire webview.

What I need is to get the width and height of the view port the user currently seeing only so when zooming the width and height of the view port should become smaller.

I need this in order to center a div element within the View port the user seeing only.

Elydasian
  • 2,016
  • 5
  • 23
  • 41
has19
  • 1,307
  • 16
  • 31

1 Answers1

1

I'm not really good with javascript but I had this problem Once. I remember it being something to do with targetting inner width. Sometimes you also have to account for the scrollbars depending how you do it.

I found this here: Why is the window.width smaller than the viewport width set in media queries

Similar issues.

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

var vpWidth = viewport().width;
Community
  • 1
  • 1
Patrick
  • 800
  • 3
  • 10
  • 36
  • 1
    it works thx. would be great if you explain a bit how the code works though – has19 Apr 18 '16 at 14:14
  • 1
    I'm glad it works. I dont know how the code works haha. I am just good at finding stuff. – Patrick Apr 18 '16 at 14:29
  • hahah nice one. now i have another problem how can i get the view port x and y position with respect to the entire width and height of browser :) – has19 Apr 18 '16 at 14:52
  • x and y position of what? Like this? http://callmenick.com/post/cross-browser-calculation-of-x-y-position – Patrick Apr 18 '16 at 14:57
  • i mean the viewport position relative to the entire document – has19 Apr 18 '16 at 15:04
  • I am not sure what you mean by document.. A document would be considered like and html file. The html is INSIDE the view port and the view port is INSIDE the window. If you are curious about finding the dimensions of your current view port size i suggest: http://viewportsizes.com/mine/ But for some reason I think im still misunderstanding you. – Patrick Apr 18 '16 at 15:07
  • i mean relative to entire browser width and height .i mean from the function you gave me i have now the width and height of the viewport the user seeing only. what i need is the x and y position of where this viewport starts from with respect to the browser width and height. – has19 Apr 18 '16 at 15:10
  • +1 thx again actually the link you gave did the work. actually it solved all my problems .i dont need the viewport even anymore . – has19 Apr 18 '16 at 15:15
  • Sweet! Im glad it worked out! (funny since I dont understand any of it really) haha – Patrick Apr 18 '16 at 15:26