做h5項目時,使用iframe嵌套一個h5子頁面在ios手機上出現(xiàn)超出屏幕的問題。子頁面本身是沒有超出屏幕的,給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>
原文作者技術(shù)博客:http://www.itdecent.cn/u/ac4daaeecdfe