How to fit iframe content with landscape orientation within device screen

问题

I have a webpage that I have set to have a landscape orientation on mobile devices within which I have placed an iframe. My problem is I cant get the iframe to fit within the mobile device screen while in landscape orientation (full width and height matching the device screen). How may I be able to achieve this?

I am using CSS:

<style>
   body, html {
     margin: 0;
     padding: 0;
     height: 100%;
     overflow: hidden;
   }

   #content {
     position:absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0
   }

  #content iframe{
    width:100%;
    height:100%;
    border:none;
  }

  @media screen and (orientation:portrait) {
      body {
         -webkit-transform: rotate(-90deg);
         -webkit-transform-origin: 50% 50%;
         transform: rotate(-90deg);
         transform-origin: 50% 50%;

           }
     }
   </style>

And HTML:

<div id="content">
    <iframe src="localhost/iframeTest/index.php" 
      allowtransparency="true" frameborder="0" scrolling="no" 
      class="wistia_embed" name="wistia_embed" allowfullscreen 
      mozallowfullscreen webkitallowfullscreen oallowfullscreen 
       msallowfullscreen width="100%" height="100%"></iframe>
</div>

回答1:

As I stated in my comment the problem is, that the size is calculated before you rotate it. To fix this you can use vh, vw sizes and just just vw for height and vh for width. Then you can rotate and translate it back into viewport.

body {
  display: block;
  width: 100vh;
  height: 100vw;
  transform: translateY(100vh) rotate(-90deg);
  transform-origin: top left;
}

Check this codepen to see it working: https://codepen.io/pixelarbeit/pen/rpLbNe

来源：https://stackoverflow.com/questions/47920889/how-to-fit-iframe-content-with-landscape-orientation-within-device-screen

标签

html

css

iframe

responsive-design