iPhone Mobile Safari 3上的getBoundingClientRect相当于什么？

Question

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

Answer 1

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

编辑2:我不建议您使用此代码...我记得更改它以处理IE10与触摸缩放的一些问题.我将尝试记住使用修复程序更新代码.

是:我认为以下适用于IE6 +,FF3 +,Safari 2+(桌面和移动),Chrome(桌面和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)
        }
    }
}

以下是身体的孩子:

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

方法确实需要一些错误检查(例如,元素必须在文档中).缩放使页面缩放时可以工作,但可能不需要(我在Windows Safari中测试webkitConvertPointFromNodeToPage时确实需要它).