iPhone Mobile Safari 3上的getBoundingClientRect相当于什么？ [英] What is the equivalent of getBoundingClientRect on iPhone Mobile Safari 3?

问题描述

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

iPhone Mobile Safari seems to be missing element.getBoundingClientRect. What is the equivalent method on iPhone Mobile Safari? This method exists on the iPad.

推荐答案

编辑1：此代码（webkitConvertPointFromNodeToPage）仅适用于非常旧的和不合适的 - 日期电话...请参阅这些评论。

Edit 1: This code (webkitConvertPointFromNodeToPage) is only required for very old and out-of-date phones... see these comments.

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

EDIT 2: I wouldn't recommend you use this code... I recall changing it to deal with some problem with IE10 with touch zoom. I will try to remember to update the code with the fix.

是否：我认为以下适用于IE6 +，FF3 +，Safari 2+（桌面和移动设备）， Chrome（桌面和Android），Opera：

Was: I think the following works on 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)
        }
    }
}

其中以下是正文：

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

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

Method does need some error checking (e.g. element must be in document). Scale makes it work when page zoomed, but may not be required (I did need it when testing webkitConvertPointFromNodeToPage in Windows Safari).

这篇关于iPhone Mobile Safari 3上的getBoundingClientRect相当于什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！