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


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


12
2018-05-07 23:04


origine


Réponses:


Edit 1: Ce code (webkitConvertPointFromNodeToPage) n'est requis que pour les téléphones très anciens et obsolètes ... voir ces commentaires.

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 zoom tactile. Je vais essayer de me rappeler de mettre à jour le code avec le correctif.

Était: Je pense que les travaux suivants sur IE6 +, FF3 +, Safari 2+ (Desktop & Mobile), Chrome (Desktop et 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 des erreurs (par exemple, l'élément doit être dans le document). L'échelle le fait fonctionner lorsque la page est agrandie, mais peut ne pas être requise (j'en ai eu besoin pour tester webkitConvertPointFromNodeToPage dans Windows Safari).


8
2018-01-21 12:53



Pour ceux qui recherchent la méthode ele.getBoundingClientRect (). Width 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
}

1
2017-07-23 10:01