Shulou(Shulou.com)06/03 Report--

Editor to share with you how to deal with ios devices using iframe width beyond the screen. I hope you will get something after reading this article. Let's discuss it together.

Scene

When I was working on the H6 project on the company's official website, I encountered the problem that the iframe exceeded the screen on the right side of the Apple X phone. It felt like it was truncated, but it displayed normally on other phones.

Analysis.

The cause of the problem: page an embeds b using iframe, and sets the width of iframe to 100%, but the actual width of page b is greater than 100% of the outer setting. Normally, the display width of page b should be 100% of the width 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 a style to the outer p of iframe: overflow: auto;-webkit-overflow-scrolling:touch;width:100%

2. Set the property scrolling='no' for iframe

3. Set the style for iframe: width: 1px; min-width: 100%; * width: 100%

Attachment: how does iframe adapt to the width in IOS?

Iframe automatically widens, and scrollbars appear on IOS phones.

Step 1: define the scrolling property in iframe to no, and set the scroll bar to not appear in iframe.

Step 2: set the style of iframe as follows

Iframe {overflow: scroll;-webkit-overflow-scrolling: touch; min-width: 100%; * width:100%; width:1px;}

After reading this article, I believe you have a certain understanding of "ios devices use iframe width beyond the screen". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for your reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.