2015-11-18 14 views
11

Im folgenden Code,Ansichtsfenster vs Fenster Vs Dokument

document.documentElement.clientWidth 
    1349 
document.documentElement.clientHeight 
    363 
window.innerWidth 
    1366 
window.innerHeight 
    363 
window.screen.height 
    768 
window.screen.width 
    1366 

So, mein Desktop-Bildschirm ist 1366 px breit und 768 px Höhe.

ich erfuhr, dass

Ansichtsfenster Dimensionen bezeichnet werden document.documentElement.clientWidth und document.documentElement.clientHeight verwenden.

Fensterabmessungen beziehen sich auf window.innerWidth und window.innerHeight.

1) Was ist der Unterschied zwischen Ansichtsfenster und Dokument?

2) Wann wird window.onload Vs document.onload aufgerufen werden?

+0

In Verbindung stehende: http://StackOverflow.com/Questions/21064101/understanding-offsetwidth-Clientwidth-Scrollwidth-and-Height- respektive – aug

Antwort

11

Die Dinge sind anders, wenn Ihre Seite größer als Ihr Bildschirm ist.

Viewport ist der rechteckige Bereich, in dem Dinge für Sie sichtbar sind. Das Dokument kann größer als das sein, und wenn ja, sehen Sie Bildlaufleisten.

Was Ihre zweite Frage: window.onload vs document.onload

Hier ist eine Zusammenfassung.

Ansichtsfenster: Es ist Ihr Gerät Bildschirm.

Fenster: Es ist Ihr Browserfenster. Das Fenster kann so groß wie das Ansichtsfenster oder kleiner sein.

Dokument: Es ist die Webseite. Es kann größer sein als das Ansichtsfenster oder sogar größer als das Fenster.

Hinweise: Einige Websites sind nicht für Handys erstellt. Daher ist die Webseite/das Dokument viel größer als das mobile Ansichtsfenster und Sie müssen wischen, um die Teile zu sehen, die außerhalb des Bildschirms verschüttet werden. Auf einem Desktop können Sie das Fenster Ihres Browsers kleiner oder gleich dem Ansichtsfenster/Monitor machen.

+1

Wenn, Viewport ist der Rechteckbereich, wo Dinge für Sie sichtbar sind *, dann, was ist der Unterschied zwischen Ansichtsfenster und Fenster? – overexchange

+1

Das @overxchange-Fenster kann viele andere Dinge als das Ansichtsfenster enthalten, z. B. die Bildlaufleisten, Navigationsleisten usw. Der Ansichtsbereich ist nur der Bereich, der den Dokumentinhalt anzeigt. Sie können den Unterschied sehen, wenn Sie 'window.innerWidth' und' window.outerWidth' vergleichen. – TwilightSun

+0

Das ist nichts anderes als Gerätebreite und -höhe. 'screen.width' und' screen.height' – overexchange

4

Dokument:

Dokument ist ein Objekt in JavaScript, die das DOM (Document Object Model) Ihrer Seite darstellt. Das Dokumentobjekt ist eine Darstellung Ihrer gesamten Seitenstruktur (alle HTML-Elemente etc.)), So folgt aus:

mit diesem:

window.innerWidth 
window.innerHeight 

gibt Ihnen die tatsächlichen sichtbar (

document.documentElement.clientHeight 
document.documentElement.clientWidth 

sollten Sie die Breite Ihres <html> Element

Ansichtsfenster werden geben physische) Abmessungen des Fensters in Ihrem Browser, ohne scr ollbars

window.onload

window.onload (a.k.a body.onload) nach der Haupt-HTML gefeuert wird, alle CSS, alle Bilder und alle anderen Ressourcen geladen und gerendert worden.

document.onload

aufgerufen, wenn das DOM bereit ist, was vor sein kann, wenn Bilder und andere externe Inhalte geladen werden.

+1

window.innerWidth enthält die Bildlaufleisten – Benn

Verwandte Themen