12

iPhone Mobile Safari 似乎缺少 element.getBoundingClientRect。iPhone Mobile Safari 上的等效方法是什么？这种方法存在于 iPad 上。

4

2 回答 2

8

编辑 1：此代码 (webkitConvertPointFromNodeToPage) 仅适用于非常旧和过时的手机......请参阅这些评论。

编辑 2：我不建议您使用此代码...我记得更改它以处理带有触摸缩放的 IE10 的一些问题。我会尽量记住使用修复程序更新代码。

是：我认为以下适用于 IE6+、FF3+、Safari 2+（桌面和移动）、Chrome（桌面和安卓）、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)
        }
    }
}

其中以下是身体的孩子：

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

方法确实需要一些错误检查（例如元素必须在文档中）。Scale 可以在页面缩放时工作，但可能不是必需的（我在 Windows Safari 中测试 webkitConvertPointFromNodeToPage 时确实需要它）。

于 2011-01-21T12:53:03.280 回答
2

对于在 iOS 3 上寻找 ele.getBoundingClientRect().width 方法的任何人，您可以使用 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
}
于 2012-07-23T10:01:07.147 回答