出于自己的一个项目有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">
快实习了,所以站点没怎么打理,溜了溜了…….
留言
谢谢分享,日常打卡~ 滴滴~
周易测算?快算算我是不是下一个贝佐斯
有跨域的教程吗?
没,跨域难搞
话说是为啥需要用这玩意呢?
iframe是非常变态的一个东西,貌似还有一种解决办法用js….
确实变态,但是有时候又需要