gpt4 book ai didi

ipad - iPad Safari (iOS 5.0.1) 上的 iframe CSS3 缩放问题

转载 作者:技术小花猫 更新时间:2023-10-29 10:38:47 25 4
gpt4 key购买 nike

我需要扩大 iframe 以使其更大(我无法控制 iframe 内容的源代码)。我正在尝试通过 -webkit-transform: scale(1.3) CSS 属性来实现它。

iframe 的内容被正确放大,但是当我尝试触摸 iframe 中的任何控件时,触摸事件似乎是在错误的位置接收到的(我可以看到控件的“阴影”是触摸时在错误的位置突出显示)。因此事件处理程序不工作(我怀疑他们没有被调用,因为在错误的地方检测到触摸)。有人遇到过这个问题吗?能解决吗?

我创建了一个产生问题的测试用例(在 iPad Safari 中尝试):http://jsfiddle.net/9vem2/

以更具可读性的格式提供源代码:

父页面(iframe 的容器):

<!DOCTYPE html>
<html>
<head>
<title>Parent</title>

<style type="text/css">
iframe
{
left: 200px;
-webkit-transform: scale(1.3);
}
</style>
</head>

<body>
<h2>Parent</h2>
<iframe src="child.html"></iframe>
</body>
</html>

子页面(iframe 内容):

<!DOCTYPE html>
<html>
<head>
<title>Child</title>
</head>

<body>
<h2>Child</h2>
<input type="text"></input>
<button onclick="alert('hello');">Button</button>
</body>
</html>

最佳答案

这感觉像是一个 hacky 解决方案,但由于它修复了看似错误的问题,所以我认为这无关紧要。我没有在 2D 中缩放,而是在 3D 中将 iframe 移向查看器,请参阅此演示:http://jsfiddle.net/ianlunn/MSUmS/

<body>被制作成一个3D空间,像这样:

body {
-webkit-perspective: 800px;
}

然后 iframe 在该 3D 空间中沿 Z 轴向查看者移动:

iframe {
-webkit-transform: translateZ(130px);
}

这可能需要针对实际应用程序进行修改,尤其是如果 iframe 包装在 <body> 以外的其他内容中时.

关于ipad - iPad Safari (iOS 5.0.1) 上的 iframe CSS3 缩放问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11559700/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com