iOS iframe 高度宽度设置

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title></title>
<style>
html, body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
}
iframe {
        width: 100%;
        height: 100%;
        min-width: 100%;
        width: 100px;
        *width: 100%;
        border: 1px solid black;
}
</style>
</head>
<body>
<iframe scrolling="no" src="http://promotion-pre.wepiao.com/explore"></iframe>
<script>
setTimeout(function() {
        alert(document.querySelector('iframe').offsetHeight)
}, 5000)
</script>
</body>
</html>

为了让 iOS 里面的 iframe 宽度和高度为父元素的 100%，必须设置如上样式和属性。 scrolling="no" 必须加。

其他平台不能加 scrolling="no" 否则无法滚动。因此需要对 iOS 平台做特殊处理。

Serenader

Learning by sharing

iOS iframe 高度宽度设置