iframe 自适应客户端设置

出于自己的一个项目有iframe的需求，为了满足PC和Mobile都能兼容所以才有了这篇文章，其实非常非常简单，大概一个月没更新文章了，就打算用这个水一篇文章吧。

此次iframe不讨论跨域问题，所以直接上需求，目的就是解决不同客户端问题，起初为了适应客户端，我以为把iframe的‘width’和height设置为100%就完事了

<iframe src="https://xxx.com/" width='100%' heigth='100%'></iframe>

然而，这并没有什么卵用，哈哈哈哈，我太天真，学傻了。然后通过设置js来控制，还是没啥用…..

后来想了下通过css来控制，治不了源站还治不了你？最后成功制服。

css片段：

*{
				margin: 0;
				padding: 0;
			}
			html,
			body,
			iframe {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0
			}

			iframe {
				border: none;
			}

完整代码：

<!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
			}

			iframe {
				border: none;
			}
		</style>
	</head>
	<body>
		<iframe id='myiframe' src='https://jkgblog.com/' frameborder='0' scrolling='0'></iframe>
	</body>
</html>

其实单独使用css还是不行，所以仔细想了想，既然是为了适应不同的客户端，那不就是响应式吗？那就加入响应式判断就行了啊，哈哈哈哈哈。

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

快实习了，所以站点没怎么打理，溜了溜了…….

版权声明:

如未注明，均为原创，转载需注明出处!

本文链接：https://jkgblog.com/1133.html

iframe 自适应客户端设置

css片段：

完整代码：

版权声明:

作者

留言

撰写回覆或留言取消回复

iframe 自适应客户端设置

css片段：

完整代码：

版权声明:

作者

留言

撰写回覆或留言 取消回复

撰写回覆或留言取消回复