Question

当我将iPad从纵向模式旋转到横向模式时，我试图使iframe进入全屏模式，并隐藏浏览器地址栏。它不起作用。

我的代码是

<!DOCTYPE HTML>
<html>
<head>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    #gameiframe{
            z-index:1;
            width:100%;
            height:100%;
            vertical-align:top !important;
        }
    </style>
</head>
<body>

  <div class="btn-box">
    <div class="hide-toggle" onclick="javascript:hideAll();">
      <i class="fa fa-close"></i>
      <div>
        Hide all      </div>
    </div>
  </div>

<div id="content">
    <iframe src="index.html" id="gameiframe" frameborder="0" allowfullscreen="true"></iframe>
</div>
</body>

到目前为止，我设法实现的唯一解决方案是将style="padding-right:0.5%"添加到iframe代码中：

<iframe src="index.html" id="gameiframe" frameborder="0" allowfullscreen="true" style="padding-right:0.5%"></iframe>

虽然它可以正常工作，但是唯一的问题是，当我将设备从横向模式旋转到纵向模式时，我可以看到整个iframe内容表明它们在“收缩”，而收缩的动画大约需要几秒钟。如果我对此一无所知，我会说内容或设备存在问题。

问题是，是否还有其他方法可以执行此操作或消除“缩小动画”并使它立即“调整大小”。

我试图将这段代码添加到#gameiframe的CSS中，但没有执行任何操作：

#gameiframe{
transition:padding 0s;
}

iPad iframe全屏填充动画

0 个答案: