vie*_*bel 8 javascript css html5 mobile-safari ios
我想要scale一个iframe mobile safari.
我在iframe里面包括一个div.
<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被切断(即不能完全看出),而在台式机/镀铬中,iframe是不会削减.
这是一个jsfiddle页面,代码如下:http://jsfiddle.net/viebel/tJQUH/
只是为了澄清:这是一个演示页面,演示了真正的问题 - 在iPad/iPhone Safari上打开时 - 所有这三行都应该具有相同的大小:http://jsfiddle.net/viebel/tJQUH/show
请告诉我该怎么办才能看到iframeMobile Safari完全未切割？
我做了一些改变。特别是把框架尺寸设置为100%。然后尝试缩放 iframe 本身。看看这个
<!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
| 归档时间： |
|
| 查看次数： |
4948 次 |
| 最近记录： |