iframe在移动safari上的div [英] iframe is cut when in div on mobile safari
问题描述
我想缩放在 mobile safari 上的iframe。
I would like to scale an iframe on mobile safari.
我在 div 中包含 iframe 。
<html>
<body>
<div id="iframe_container">
<iframe src="http://jsfiddle.net/viebel/kTzDS/show" style="width:300px;height:300px;"/>
</div>
</body>
</html>
现在我缩放 div 代码：
$(function() {
$('#iframe_container').css({
'-webkit-transform': 'scale(0.7)',
'-webkit-transform-origin': '0 0 '
});
});
在 iOS / Safari上， iframe 被剪切（即不能被完全看到），而在桌面/ chrome上， iframe 是不是剪切。
On iOS/Safari, the iframe is cut (i.e. can't be entirely seen) while on desktop/chrome, the iframe is not cut.
这是一个包含代码的jsfiddle页面： http://jsfiddle.net / viebel / tJQUH /
Here is a jsfiddle page with the code: http://jsfiddle.net/viebel/tJQUH/
只是为了澄清：这里是一个演示页面，演示了真正的问题 - 当在iPad / iPhone Safari上打开时 - ： http://jsfiddle.net/viebel/tJQUH/show
Just to clarify: here is a demo page that demonstrates the real problem - when opened on iPad/iPhone Safari - all the three lines should be of the same size: http://jsfiddle.net/viebel/tJQUH/show
请咨询我如何查看移动Safari上的 iframe 完全未剪切？
Please advice what can I do to see the iframe on Mobile Safari completely uncut?
推荐答案
我做了一些改动。特别是使框架大小为100％。然后尝试缩放iframe本身。检查此项
I have made few changes.Especially make the frame-size as 100%. Then try to scale the iframe itself.Check this out
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by viebel</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script>
$(document).ready(function()
{
//alert('hai');
$('#ifd').css({
'-webkit-transform': 'scale(1.1)',
'-webkit-transform-origin': '0 0',
'width': '100%',
'height': '100%'
});
});
</script>
</head>
<body>
<div id="iframe_container" style="width:500px;height:400px;border:1px solid black;">
<iframe src="http://jsfiddle.net/viebel/kTzDS/show" id="ifd" />
</div>
</body>
</html>
链接到jsfiddle：
http://jsfiddle.net/viebel/tJQUH/13
Link to jsfiddle: http://jsfiddle.net/viebel/tJQUH/13
这篇关于iframe在移动safari上的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
