How can the iFrame's width and height be maintained when rotated?

edit

If you are referring to maintaining the width and height of an iFrame when the device is rotated on a mobile device, you can use CSS media queries to adjust the size of the iFrame based on the device's screen width and height.

First, set the iFrame's width and height to be 100% of its container. This ensures that the iFrame will always take up the full width and height of its parent element.

Then, use media queries to set the max-width and max-height of the iFrame based on the device's screen size. For example, if you want the iFrame to have a maximum width of 600 pixels on mobile devices and 800 pixels on larger screens, you can use the following CSS:

iframe {
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 600px) {
  iframe {
    max-width: 600px;
    max-height: 600px;
  }
}

@media only screen and (min-width: 601px) {
  @media only screen and (max-width: 800px) {
    iframe {
      max-width: 800px;
      max-height: 800px;
    }
  }

  @media only screen and (min-width: 801px) {
    iframe {
      max-width: none;
      max-height: none;
    }
  }
}

This code will set the iFrame to have a maximum width and height of 600 pixels when the device's screen width is 600 pixels or less, a maximum width and height of 800 pixels when the screen width is between 601 and 800 pixels, and no maximum width or height when the screen width is greater than 800 pixels.

By using media queries, the iFrame's width and height will be maintained as the device is rotated and its screen size changes.