Scene
When working on the company's official h5 project, I encountered the problem of the iframe on the right side of the Apple X phone, which seemed to be truncated, but it was displayed normally on other phones.
analyze
The reason for the problem: Page a uses an iframe to embed b, and sets the width of the iframe to 100%, but the actual width of page b must be greater than 100% set by the outer layer.
Under normal circumstances, the display width of page b should be 100% given by the outer layer, but on iOS, when the true width in the iframe is greater than the width given by the outer layer, the displayed width is the true width.
solve
1. Add style to the outer div of the iframe:overflow: auto;-webkit-overflow-scrolling:touch;width:100%;
2. Set properties for iframescrolling='no'
3. Set styles for iframe:width: 1px; min-width: 100%; *width: 100%;
<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;"> <iframe height="100%" scrolling="no" style="width: 1px; min-width: 100%; *width: 100%;" src="/timeline"> </iframe> </div>
Appendix: How to adapt to the width of iframe in IOS?
The iframe has automatically widened, and a scroll bar appears on the IOS phone
Step 1: Define the scrolling property in the iframe to no, and set the scroll bar not to be displayed in the iframe.
<iframe scrolling="no" ></iframe>
Step 2: Set the style of the iframe to the following
iframe{
overflow: scroll;
-webkit-overflow-scrolling: touch;
min-width: 100%;
*width:100%;
width:1px;
}
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support.