Was entspricht GetBoundingClientRect auf iPhone Mobile Safari 3?

Question

iPhone Mobile Safari scheint element.getBoundingClientRect zu fehlen. Was ist die entsprechende Methode auf iPhone Mobile Safari? Diese Methode existiert auf dem iPad.

Answer 1

Edit 1: Dieser Code (webkitConvertPointFromNodeToPage) wird nur für sehr alte und veraltete Telefone benötigt ... siehe these comments.

EDIT 2: Ich würde nicht empfehlen, diesen Code zu verwenden ... Ich erinnere mich, es zu ändern, um mit einem Problem mit IE10 mit Touch-Zoom umzugehen. Ich werde versuchen, mich daran zu erinnern, den Code mit dem Update zu aktualisieren.

War: Ich denke, die folgenden Werke auf IE6 +, FF3 +, Safari 2+ (Desktop-& Mobile), Chrome (Desktop-& Android), Opera:

function offset(el) { 
    var convertPoint = window.webkitConvertPointFromNodeToPage; 
    if ('getBoundingClientRect' in el) { 
     var 
      boundingRect = el.getBoundingClientRect(), 
      body = document.body || document.getElementsByTagName("body")[0], 
      clientTop = document.documentElement.clientTop || body.clientTop || 0, 
      clientLeft = document.documentElement.clientLeft || body.clientLeft || 0, 
      scrollTop = (window.pageYOffset || document.documentElement.scrollTop || body.scrollTop), 
      scrollLeft = (window.pageXOffset || document.documentElement.scrollLeft || body.scrollLeft); 
     return { 
      top: boundingRect.top + scrollTop - clientTop, 
      left: boundingRect.left + scrollLeft - clientLeft 
     } 
    } else if (convertPoint) { 
     var 
      zeroPoint = new WebKitPoint(0, 0), 
      point = convertPoint(el, zeroPoint), 
      scale = convertPoint(document.getElementById('scalingEl'), zeroPoint); 
     return { 
      top: Math.round(point.y * -200/scale.y), 
      left: Math.round(point.x * -200/scale.x) 
     } 
    } 
} 

, wo die folgenden ein Kind des Körpers :

<div id="scalingEl" style="position:absolute;top:-200px;left:-200px;visibility:hidden;"></div> 

Methode benötigt einige Fehlerprüfung (z. B. Element muss im Dokument sein). Scale funktioniert, wenn die Seite gezoomt wurde, ist aber möglicherweise nicht erforderlich (ich brauchte es, um webkitConvertPointFromNodeToPage in Windows Safari zu testen).

Answer 2

Für alle, die für die ele.getBoundingClientRect(). Breite Methode auf iOS 3, können Sie ele.offsetWidth verwenden

if("getBoundingClientRect" in this.container) { 
    this.width = this.container.getBoundingClientRect().width ;  
}else { 
    this.width = this.container.offsetWidth; //http://help.dottoro.com/ljvmcrrn.php 
}