Solve the problem of using iframe tags to widen on some iPhones


Iframe widens on some iPhones

As shown in the figure below:



Baidu checked a lot and tried a lot. The final solution is as follows:


I use Vue

HTML code:

CSS code:

.iframeCss {
    min-width: 100%;
    Width: 3.75rem! Important; // setting the iframe width is particularly important


Javascript code:

//The onload method is executed in mounted()
  onload() {
    //Get iframe tag
      var iframe = document.getElementById('iframe1')
      let _this = this
      iframe.onload = function() {
     //Determine whether the current mobile terminal is apple system
        var u = navigator.userAgent
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
        if (isiOS) {
          try {
       //This try catch is optional
       //I have tested my own program several times. Without this code, the page may be widened for the first time when it is displayed, but it will soon be normal again. Looking at the widening is just a transition. I don't know whether it is my mobile phone problem or other problems. There is no in-depth study on this
   = (window.screen.availWidth / document.body.clientWidth) * 100 + '%'
            var iframebody = iframe.contentWindow.document.body
   = document.body.clientWidth + 'px'
            // eslint-disable-next-line no-empty
          } catch (error) {}
      //This is to set the scrolling property of the iframe
          _this.type = 'no'
        window.scrollTo(0, 0)

The second kind: (this is the supplementary content, the use of this kind is preferred)

HTML code:

CSS code:

.header {
     height: 0.44rem;
    width: 100%;
    background-color: #09b6f2;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
.swapper {
    position: fixed;
    top: 0.44rem;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;

There is no JavaScript code to handle;

This can ensure that the head is fixed, and the content of iframe can also be scrolled, without dealing with the situation of different mobile terminals.

Photo and content reference address:



Recommended Today

What black technology does the real-time big data platform use behind the glory of the king?

Hello everyone, I’m Xu Zhenwen. Today’s topic is “Tencent game big data service application practice based on Flink + servicemesh”, which is mainly divided into the following four parts: Introduction to background and Solution Framework Real time big data computing onedata Data interface service onefun Microservice & servicemesh 1、 Introduction to the solution framework and […]