Fenster.innerWidth vs-Dokument.documentElement.clientWidth

Bezüglich window.innerWidth und document.documentElement.clientWidth,

  1. Webkit (Chrome /Safari) Ansprüche innerWidth ist kleiner als clientWidth.

  2. Trident und Presto Anspruch innerWidth größer ist als clientWidth.

  3. Gecko Ansprüche innerWidth ist die gleiche Größe wie clientWidth.

Was ist der richtige Verhalten erklärte, W3C (oder silimar "Behörde")?

Test-Skript (auf JSFiddle) (auf GoogleHost):

JS:

setInterval(function() {
  var inner_w = window.innerWidth;
  var inner_h = window.innerHeight;
  var client_w = document.documentElement.clientWidth;
  var client_h = document.documentElement.clientHeight;
  var debug_msg = "inner: " + inner_w + "-" + inner_h + "<br>client: " + client_w + "-" + client_h;
  document.getElementById("d").innerHTML = debug_msg;
  document.title = debug_msg;
  document.body.style.background = (client_w === inner_w && client_h === inner_h ? "green" : "red");
}, 60);

HTML:

<div id="d"></div>

(Führen Sie das snippet in full page mode und un-maximieren oder "restore" - Fenster. Beobachten debug_msg Sie beim ziehen der Kante des Fensters, um die Größe anzupassen.)

  • "Fenster inner-Größe: 1280x909 | client-Größe:1280x909" Chrome 13
  • zoom zoom
  • Ah... ich sehe... mir scheint, dass es in der Regel nur um 1px, und dass nur einige der Zeit.
  • das ist, was ich bin reden über. webkit ' s Fenster.innerWidth ist kleiner, aber in opera und ie wird es größer
InformationsquelleAutor Pacerier | 2011-08-04
  1. 29

    Gemäß der W3C - Spezifikation (17. März 2016):

    Den innerWidth Attribut muss wieder die viewport-Breite, einschließlich der Größe des gerenderten Bildlaufleiste (sofern vorhanden), oder null, wenn es keine Viewports.

    ...

    Den clientWidth Attribut müssen, führen Sie diese Schritte aus:

    1. Wenn das element hat keinen zugehörigen CSS-layout-Feld oder, wenn das CSS-layout box ist inline, null zurückgeben.
    2. Wenn das element das root-element und das element Dokument ist nicht im quirks-Modus, oder wenn das element ist der HTML-body-element und das element Dokument im quirks-Modus, Rückkehr der viewport-Breite ein, der Größe der gerenderten Bildlaufleiste (sofern vorhanden).
    3. Return die Breite Polsterung der Kante, ohne die Breite von jedem gerenderten Bildlaufleiste zwischen die padding-Kante und die Grenze, Rand, ignorieren alle Transformationen, die für das element und seine Vorfahren.
    InformationsquelleAutor approxiblue
  2. 16

    Ich bin mit diesem:

        window.innerWidth && document.documentElement.clientWidth ? 
Math.min(window.innerWidth, document.documentElement.clientWidth) : 
window.innerWidth || 
document.documentElement.clientWidth || 
document.getElementsByTagName('body')[0].clientWidth;

    Deckt es Fälle, in denen die scrollbar wird nicht berücksichtigt und hat die mobile-Unterstützung.

    InformationsquelleAutor mrgoos
Schreibe einen Kommentar