如何在设备屏幕中使用横向方向的iframe内容

Posted 2021-05-02

我有一个网页，我已设置为在移动设备上设置横向，我在其中放置了iframe。我的问题是我无法在横向方向（整个宽度和高度与设备屏幕匹配）中使iframe适合移动设备屏幕。我怎么能够实现这个目标？

我正在使用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>

和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>

答案

正如我在评论中所述，问题是，在旋转之前计算尺寸。要解决这个问题，您可以使用vh, vw尺寸，只需使用vw作为高度，使用vh作为宽度。然后，您可以旋转并将其转换回视口。

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

检查此codepen以查看它是否正常工作：https://codepen.io/pixelarbeit/pen/rpLbNe