iframe 在手机版中自适应

今天遇到一个手机版前端的问题，有个页面是用 iframe 标签来内嵌其他 URL 的网页，但在手机版要做到不但与父级页面的宽度与高度的自适应，也要与内嵌页面的自适应。首次遇到只能是在网络找解决的办法。

找到的解决方法是用 H5.在 head 中写

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" id="viewport" content="width=640px, user-scalable=no">

不过上面两句测试后发现只是解决了父级的自适应的问题，不能解决内嵌页面的自适应问题，如果你确定内嵌的网页是手机版的话，是没有问题的，但如果遇到的是一个PC与手机版自适应（响应式）的页面时就不起作用了。所以后来又找到了以下的代码来解决。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>test</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,
			body,
			iframe {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0
			}

			#wrap {
				width: 100%;
				height: 100%;
				overflow-x: hidden;
			}

			iframe {
				border: none;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<iframe src="https://npm.taobao.org"></iframe>
		</div>
		<script>
			if (document.getElementsByTagName('meta').length > 1) {
				var oMeta = document.getElementsByTagName('meta')[1]; //第二个
				oMeta.content = '';
			}
		</script>
	</body>
</html>

转载请注明：隨習筆記 » iframe 在手机版中自适应