发表新帖
发表新帖

jQuery(window).height inaccurate

后端 未结
关注
6 1689
挽巷
挽巷 2021-01-04 07:24

I\'m doing a simple test on $(window).height() and I\'m getting a value of 2602 on a screen resolution of 1366 x 768.

jQuery(document).ready(function($){
相关标签:
6条回答
  • 隐瞒了意图╮
    2021-01-04 07:57

    jquery uses clientWidth and height that returns value of current showing page excluding scroll bar space there is one way to make it accurate do overflow:hidden to your body tag then you will get the original viewport size

    0 讨论(0)
  • 灰色年华
    2021-01-04 07:59

    You're doing everything right, and you're not getting the values you should. This is not how jQuery is supposed to behave.

    In this very page, I tested out the functions you were calling to see what their values would be. They did represent accurately the actual width and height of the visible page in my window. Here's the results.

    Chrome, with the standard Dev console

    Some calls to the window width and height in jQuery, returning correct results for pixels on screen

    Firefox, with Firebug

    Some calls to the window width and height in jQuery, returning correct results for pixels on screen

    Something is very wrong on your end

    jQuery's $(window).height() is supposed to display the visible viewport. See the docs on jQuery's height function:

    This method is also able to find the height of the window and document.

    $(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document

    window.height is a settable value things can interfere with, but $(window).height() is unaffected by changes to it.

    What's going wrong exactly?

    Whatever is going on, whatever function you're calling, you are not calling jQuery's implementation of $(window).height().

    Using your browser's developer console, put a break point on the line where you call $(window).height() and step into the function call. What is actually being called when you call $(window).height()? You need to find this out.

    Has someone replaced the height function with a new or better one?

    A strong suspicion of mine is that some part of the code base you're working with has gone and done this:

    // Replace jQuery's height function with a better one to fix bug XYZ
$(window).height = function brandNewHeightFunction() {
    return someVeryWrongValue;
};

    If so, when you step into the height function, it may in fact not enter into a part of the jQuery library, but another part of your own libraries. Find out what necessitated it and see what you can do about it. If you simply remove this functionality, other stuff depending on it working this way may start breaking.

    Has someone gone and modified/customised your jQuery library?

    Check to see if this has happened with whoever you can, and whatever history tools you have available. What version of jQuery are you using? Download the same one from the jQuery site if possible, and see the code you see when you step into the window height function is the same one as you see there.

    Redownload jQuery and reference it. If your window height function suddenly starts working, someone may have done this. Find out why this was customised. If you repair it, other stuff depending on this behaviour might start breaking.

    0 讨论(0)
  • 無奈伤痛
    2021-01-04 08:03

    Same problem here, it looks that jquery (and dom in general) is not calculating sizes correctly in quirksmode.

    Two solutions:

    1. Add doctype html at the top of your page, or
    2. Use window.innerHeight, window.innerWidth if first option is not an option.

    Hope it helps.

    0 讨论(0)
  • 借酒劲吻你
    2021-01-04 08:09

    This can be just as simple as a missing or incorrect DOCTYPE (affected Chrome but not IE).

    Interestingly this isn't even a jQuery issue - it affects document.documentElement.clientHeight too.

    Without doctype:

    enter image description here

    With doctype:

    <!DOCTYPE html>

    enter image description here

    I thought I had a layout template on my page, but it turned out I didn't - and therefore didn't have DOCTYPE.

    0 讨论(0)
  • 春和景丽
    2021-01-04 08:14

    Actually, this was a result of a hidden div element on my page. I had a thickbox link that would pull this hidden content. Removing this fixed the jQuery.width()!

    Surprising, not sure if helpful, but is the answer indeed.

    0 讨论(0)
  • 粉色の甜心
    2021-01-04 08:23

    It is my experience that $(document).height(); is typically what you want in most scenarios. The difference being if the page is bigger than the window (has scroll bars), you will get the full height of the entire scrollable document while $(window).height() will only get you the height of the currently sized tab.

    So if you want an element to take up the full size of the window + any scrollable area below the fold $(document).height is the way to go.

    There is definitely a use case for both though.

    0 讨论(0)
 看不清?
提交回复
热议问题