iframe在ios设备宽度超出屏幕解决办法
做h5项目时,使用iframe嵌套一个h5子页面在ios手机上出现超出屏幕的问题。子页面本身是没有超出屏幕的,给iframe;设置了宽度100%没有起作用,在ios手机上为超出屏幕,但是在安卓手机上显示正常。解决办法:给iframe设置属性scrolling=‘no’给iframe设置样式:width: 1px; min-width: 100%; *width: 100%;...
·
做h5项目时,使用iframe嵌套一个h5子页面在ios手机上出现超出屏幕的问题。子页面本身是没有超出屏幕的,给iframe;设置了宽度100%没有起作用,在ios手机上为超出屏幕,但是在安卓手机上显示正常。
解决办法:
给iframe设置属性scrolling=‘no’
给iframe设置样式:width: 1px; min-width: 100%; *width: 100%;
完整代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
</style>
<script>
function changeFrameHeight(){
document.getElementById("iframe").height=0;
document.getElementById("iframe").height=document.getElementById("iframe").contentWindow.document.body.scrollHeight;
}
window.onresize=function(){
changeFrameHeight();
}
</script>
</head>
<body>
<iframe id="iframe" width="100%" src="" onload="changeFrameHeight()" scrolling="no" frameborder="0"></iframe>
</body>
</html>
更多推荐
已为社区贡献2条内容
所有评论(0)