Quel est l'équivalent de getBoundingClientRect sur iPhone Mobile Safari 3?

Question

iPhone Mobile Safari semble manquer element.getBoundingClientRect. Quelle est la méthode équivalente sur iPhone Mobile Safari? Cette méthode existe sur l'iPad.

Answer 1

Édition 1: Ce code (webkitConvertPointFromNodeToPage) n'est requis que pour les téléphones très anciens et obsolètes ... voir these comments.

EDIT 2: Je ne vous recommande pas d'utiliser ce code ... Je me souviens de l'avoir changé pour faire face à un problème avec IE10 avec le zoom tactile. Je vais essayer de me souvenir de mettre à jour le code avec le correctif.

était la suivante: Je pense que les travaux suivants sur IE6 +, FF3 +, Safari 2+ (bureau & Mobile), Chrome (Bureau & 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) 
     } 
    } 
} 

où ce qui suit est un enfant du corps :

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

La méthode nécessite une vérification d'erreur (par exemple, l'élément doit figurer dans le document). Scale le fait fonctionner lorsque la page est agrandie, mais peut ne pas être nécessaire (j'en ai eu besoin lors du test de webkitConvertPointFromNodeToPage dans Windows Safari).

Answer 2

Pour ceux qui cherchent la ele.getBoundingClientRect(). Méthode largeur sur iOS 3, vous pouvez utiliser ele.offsetWidth

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