Question: safari iframe width and height will be content in the browser stretch
It is the existence of a defect safari browser, regardless of the setting iframe width and height, width and height stretch will be content, which can lead to a page becomes very large.
solution
- Provided iframe scrolling = "0" Properties
- Use overflow: scroll is wrapped div iframe
- Set within the iframe page body position: fixed
Option One
Solve Width:
#iframe{
width:1px;
min-width: 100%;
*width:100%;
}
<iframe src="" scrolling="no">Solve Height:
#iframe{
height:1px;
min-height: 100%;
*height:100%;
}
<iframe src="" scrolling="no">PS: Use this method, iframe will not slide, if it is in the case of height and width do not need to slide, this method is worth a try
Option II
<style>
.scroll-box {
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.scroll-box iframe {
height: 100%;
width: 100%;
}
</style>
<html>
<body>
<div class="scroll-box">
<iframe src="" />
</div>
</body>
</html>ps: the use of this method in Safari, iframe height and width are still stretch, because the addition of only the outer package, to prevent the influence to the parent window iframe page layout.
Note that - as an iframe width and height is still a stretch, resulting in iframe position: fixed position of the element different from the expected, such as in the iframe when the width and height greater than width and height of the browser window, the vertical and horizontal center fixed elements no longer centered, but shifted to lower right
third solution
#iframe{
width: 100%;
height:100%;
}
<iframe id="iframe" src=""></iframe>
/********iframe内的页面********/
html{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
body{
position: fixed;
top:0;
left:0;
width:100%;
height: 100%;
overflow: scroll;
}PS: This method is by limiting the width and height of the iframe window html, iframe to solve the problem of stretch of html, in a case where the page may be operated iframe, this method can solve the width and height of overflow. But there are flaws, sliding under the safari experience is poor.
Sliding along the experience: the body increases -webkit-overflow-scrolling:touch;, so will slide smoothly, but, there will be a rubber band effect, and in order to solve the rubber band effect, the need to do further processing, refer to: https://www.zhihu.com/questio ...
Summary: There is no perfect solution