1
iFrameを配置した携帯端末に横向きに設定したウェブページがあります。私の問題は、横向き(デバイスの画面に一致する全幅と高さ)の間、モバイルデバイスの画面に収まるようにiframeを取得できないことです。どのように私はこれを達成することができますか?私はCSSを使用していますデバイス画面内に横向きのiFrameコンテンツを挿入する方法
:
<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>
をあなたはちょうど '回転(-90degを)'使用することはできません。幅と高さを計算し、その後に回転します。だから、それはあなたのウィンドウに拡大されません。あなたはpropably JSであなたの幅を計算する必要があります – pixelarbeit