Question

我有这个链接。

http://minjago.com/beta/index.php/front/game/499

我希望如果我的屏幕尺寸小于500，allowfullscreen会被触发为真。我怎样才能做到这一点？我不希望通过CSS完成它。

Answer 1

如果您无法找到其他方法，请按照CSS的说明进行操作。创建两个iframe，一个将allowfullscreen设置为true，另一个设置为false。使用CSS时，将allowfullscreen设置为true的iframe隐藏在大于500的屏幕上，同时将大小设置为false隐藏在大小为500或更小的屏幕上。

CSS：

＆＃13;

@media (max-width:500px){.hidden-large{display:none!important}}
@media (min-width:501px){.hidden-small{display:none!important}}

＆＃13;

然后在iframe中包含课程hidden-large或hidden-small。

Answer 2

您可能会使用模态阻止程序......它涉及UX中的另一个步骤，但可以完成工作。

HTML：

<iframe id="fullscreen" src="http://jsfiddle.net" allowfullscreen></iframe>

<div id="confirm" style="display:none;position:fixed;width:100%;height:100%;text-align:center;padding-top:30px;background:rgba(0,0,0,.75);top:0;left:0;">
  <button id="allow">Allow fullscreen</button>
  <button id="cancel">Cancel fullscreen</button>
</div>

JS：

jQuery(document).ready(function()
{
  if( jQuery( window ).width() <= 600 )
  {
    jQuery('#confirm').show();
    jQuery('#allow').on('click', function(e){
      document.getElementById('fullscreen').webkitRequestFullScreen();
      jQuery('#confirm').hide();
      e.stopPropagation();
    });
    jQuery('#confirm,#cancel').on('click', function(){
      jQuery('#confirm').hide();
    });
  }
});

您必须添加检查以确定要使用哪个RequestFullscreen（）（moz / webkit等）。否则，此示例有效，可以在此处测试：https://jsfiddle.net/tsdexter/g1evfepj/

提示：使jsfiddle中的视口宽度小于600px，看它是否正常工作。

Answer 3

您可以使用matchMedia()来管理应用处理视口大小的方式，而不是依赖CSS媒体查询。全屏API需要用户交互，因此此过程需要一点CSS。

详细信息在代码段中注释。
由于沙盒限制，代码段将无法正常运行。因此，PLUNKER也可供审核。
查看Plunker时，单击在新窗口中打开预览的蓝色按钮。
将新窗口宽度调整为500px或更小。
视口应该变暗，这对用户来说是一个覆盖的提示。
点击叠加后，它将全屏显示。

段

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>fs</title>
  <style>
    /* Although CSS is excluded by request from OP, this is 
    | an exception and in this circumstance necessary. User
    | must interact for Full Screen API to work. In abscence
    | of a pure programmitic solution, one must rely on CSS
    | and/or HTML.
    */
    .overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      z-index: 1;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, .3);
      display: none;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <!--Add this div to HTML-->
  <div class='overlay'></div>
  <iframe id="fullscreen" src="http://www.example.com" width='100%' height='500' allowfullscreen></iframe>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    /*
        | Create a mediaQueryList (mql) with a query that matches
        | a viewport of 500px or less.
        | Pass it into the function mqr()
        | Add a listener to mql and assign mqr() as event handler.
        | Reference target as a jQuery object (iframe).
        */
    var $obj = $('iframe');
    var mql = window.matchMedia("screen and (max-device-width: 500px)");
    mqr(mql);
    mql.addListener(mqr);

    /*
    | Reference .overlay as jQuery object 
    | (overlay is display: none initially)
    | Reference #fullscreen as a plain object.
    | Use the .matches property to compare mql to viewport
    | If the viewport is < 500px then...
    | ...show() overlay then...
    | ...pass overlay and fs to the fs() function
    */
    function mqr(mql) {
        var overlay = $('.overlay');

        if (mql.matches) {
          overlay.show();
          fs(overlay, $obj);
        }
      }
      // isFullScreen() function will verify if full screen is active
    var isFullScreen = function() {
      return !!(document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
    }

    /*
    | fs() function will delegate click event on a given
    | element (first parameter).
    | When triggered, it will target the element (second 
    | parameter) and dereference it in order to use the 
    | Full Screen API.
    | The isFullScreen function determines if full 
    | screen is already active...
    | if not active requestFullscreen method is called...
    | ...if it is, then exitFullscreen method is called.
    */
    function fs(overlay, $obj) {
      overlay.on('click', function() {
        var fs = $obj[0];
        if (!isFullScreen()) {
          if (fs.requestFullscreen) {
            fs.requestFullscreen();
          } else if (fs.mozRequestFullScreen) {
            fs.mozRequestFullScreen();
          } else if (fs.webkitRequestFullscreen) {
            fs.webkitRequestFullscreen();
          } else if (fs.msRequestFullscreen) {
            fs.msRequestFullscreen();
          }
        } else {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        }
      });
    }
  </script>
</body>

</html>

＆＃13;

如果屏幕尺寸很小，我可以在FullScreen中打开iframe吗？

3 个答案:

段