Mit jquery die Höhe und Breite des Browser-Ansichtsfensters ohne Bildlaufleisten abrufen?

Wie erhalte ich mit jQuery die Höhe und Breite des Browser-Ansichtsfensters ohne Bildlaufleisten?

Folgendes habe ich bisher versucht:

       var viewportWidth = $("body").innerWidth();
       var viewportHeight = $("body").innerHeight();

Diese Lösung berücksichtigt nicht die Browser-Bildlaufleisten.

$(window).height();
$(window).width();

Mehr Info

• http://api.jquery.com/height/
• http://api.jquery.com/width/

Die Verwendung von jQuery ist jedoch nicht unbedingt erforderlich, um diese Werte abzurufen. Verwenden

document.documentElement.clientHeight;
document.documentElement.clientWidth;

um Größen ohne Bildlaufleisten zu erhalten, oder

window.innerHeight;
window.innerWidth;

um das gesamte Ansichtsfenster einschließlich der Bildlaufleisten abzurufen.

document.documentElement.clientHeight <= window.innerHeight;  // is always true

Verwenden Sie nicht jQuery, sondern nur Javascript, um das richtige Ergebnis zu erzielen:

Dies beinhaltet die Breite / Höhe der Bildlaufleiste:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);

Dies schließt die Breite / Höhe der Bildlaufleiste aus:

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);

Hier ist ein generisches JS, das in den meisten Browsern (FF, Cr, IE6 +) funktionieren sollte:

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}

Sie verwenden die falschen Methodenaufrufe. Ein Ansichtsfenster ist das "Fenster", das im Dokument geöffnet ist: Wie viel davon können Sie sehen und wo.

Wenn $(window).height()Sie verwenden, erhalten Sie nicht die Größe des Ansichtsfensters, sondern die Größe des gesamten Fensters. Dies entspricht normalerweise der Größe des gesamten Dokuments, obwohl das Dokument möglicherweise noch größer ist.

Um die Größe des tatsächlichen Ansichtsfensters zu ermitteln, verwenden Sie window.innerHeightund window.innerWidth.

https://gist.github.com/bohman/1351439

Verwenden Sie beispielsweise nicht die jQuery-Methoden $(window).innerHeight(), da diese die falschen Zahlen angeben. Sie geben Ihnen die Höhe des Fensters, nicht innerHeight.

Beschreibung

Im Folgenden wird die Größe des Browser-Ansichtsfensters angegeben.

Stichprobe

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

Mehr Informationen

• jQuery.height ()
• jQUery.width ()

Wie Kyle vorgeschlagen hat, können Sie die Größe des Client-Browser-Ansichtsfensters messen, ohne die Größe der Bildlaufleisten auf diese Weise zu berücksichtigen.

Beispiel (Abmessungen des Ansichtsfensters OHNE Bildlaufleisten)

// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');

// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

Wenn Sie alternativ die Abmessungen des Client-Ansichtsfensters unter Berücksichtigung der Größe der Bildlaufleisten ermitteln möchten, ist dieses Beispiel unten am besten für Sie geeignet.

Vergessen Sie zunächst nicht, Ihr Body-Tag auf 100% Breite und Höhe einzustellen, um sicherzustellen, dass die Messung genau ist.

body { 
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}

Beispiel (Abmessungen des Ansichtsfensters MIT Bildlaufleisten)

// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');

// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

Das Skript $(window).height()funktioniert gut (zeigt die Höhe des Ansichtsfensters und nicht das Dokument mit Bildlaufhöhe an), ABER es erfordert, dass Sie das Doctype-Tag korrekt in Ihr Dokument einfügen, zum Beispiel diese Doctypes:

Für HTML5: <!doctype html>

für Übergangs-HTML4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Wahrscheinlich ist der von einigen Browsern angenommene Standard-Doctype ein solcher, $(window).height()der die Höhe des Dokuments und nicht die Höhe des Browsers verwendet. Mit der Doctype-Spezifikation ist sie zufriedenstellend gelöst, und ich bin mir ziemlich sicher, dass Sie Peps vermeiden werden, den "Scroll-Overflow in versteckt und dann zurück zu ändern", was leider ein etwas schmutziger Trick ist, besonders wenn Sie es nicht tun. t Dokumentieren Sie es im Code für die zukünftige Verwendung durch den Programmierer.

Wenn Sie ein Skript erstellen, können Sie außerdem Tests erfinden, um Programmierern in Ihren Bibliotheken zu helfen. Lassen Sie mich ein paar erfinden:

$(document).ready(function() {
    if(typeof $=='undefined') {
        alert("Error, you haven't called JQuery library");
    }
    if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
    } 
});

$(document).ready(function() {

  //calculate the window height & add css properties for height 100%

  wh = $( window ).height();

  ww = $( window ).width();

  $(".targeted-div").css({"height": wh, "width": ww});

});

Verwenden von jQuery ...

$ (document) .height () & $ (window) .height () geben die gleichen Werte zurück. Der Schlüssel besteht darin, die Auffüllung und den Rand des Körpers zurückzusetzen, damit Sie nicht scrollen.

<!--

body {
    padding: 0px;
    margin: 0px;
    position: relative;
}

-->

Hoffe das hilft.

Ich wollte ein anderes Aussehen meiner Website für Breitbild- und Kleinbildschirme. Ich habe 2 CSS-Dateien erstellt. In Java wähle ich je nach Bildschirmbreite aus, welche der 2 CSS-Dateien verwendet wird. Ich benutze die PHP-Funktion echomit in der echo-funktion etwas Javascript.

Mein Code im <header>Abschnitt meiner PHP-Datei:

<?php
echo "
<script>
    if ( window.innerWidth > 400)
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018.css\" rel=\"stylesheet\" type=\"text/css\">'); }
    else
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018small.css\" rel=\"stylesheet\" type=\"text/css\">'); }
</script>
"; 
?>