HTML: 如何提示用户在 he/she 打开文档时切换全屏视图？

Question

我制作了一些 HTML 幻灯片，最好在全屏模式下观看。

我想给用户一些提示，让他们在 he/she 打开文档时切换全屏视图。

例如，屏幕中央的一些文本，如 "please press F11 to switch to full screen view"，可能在一个框内或其他内容中，然后在用户按照指南操作后消失，不会再次显示。

有没有办法通过在文档中添加一些js代码来做到这一点？

我不想使用警告框或其他太突然的东西。

Answer 1

你基本上有两个选择。更微妙的是在文档中放置一个警报（不是 javascript 警报，Bootstrap alert），也许在顶部。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="alert alert-primary alert-dismissible fade show" role="alert">
  Please press F11 to switch to full screen view!
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

另一种更积极的方法是使用 modal，它更类似于 javascript 警报。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="modal fade" id="fullscreenModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        Please press F11 to switch to full screen view!
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  $('#fullscreenModal').modal('toggle');
</script>

在这两种情况下，一旦用户已经看到您的消息，您将需要一个 cookie 来存储，然后检查该 cookie 来决定是否要显示该消息。

HTML: 如何提示用户在 he/she 打开文档时切换全屏视图？

HTML: How to give the user a hint to toggle full screen view when he/she opens the document?

html

javascript

slideshow