Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

Сделать собственный полноэкранный режим Firefox похожим на Chrome

Автор вопроса: murk003Ответов: 1

Для тех из вас, кто не знает, собственный полноэкранный режим - это когда ваш браузер занимает весь экран вашего компьютера, как на этом пример. Я создал полноэкранное приложение JavaScript, которое работает, но по умолчанию Chrome и Firefox по-разному открываются в полноэкранном режиме. Firefox растягивает объект так, что он занимает весь экран (высота 100%, ширина 100%), в то время как Chrome помещает объект на черный фон с его естественными пропорциями.

Я хотел бы, чтобы Firefox действовал как полноэкранный режим в Chrome. Я чувствую, что это решается простым изменением CSS, но я не очень хорошо знаю CSS.

Это то, что я пробовал до сих пор:

<!DOCTYPE html>
<html>
<head>
<style>
  .fsElement:-webkit-full-screen {
      //this is the CSS for Chrome's fullscreen page
  }
  .fsElement:-moz-full-screen {
      //this is the CSS for Firefox's fullscreen page
  }
</style>
</head>
<body>

<script type="text/javascript">
  function goFullscreen(id) {
      // Get the element that we want to take into fullscreen mode
      var element = document.getElementById(id);

      // These function will not exist in the browsers that don't support fullscreen mode yet,
      // so we'll have to check to see if they're available before calling them.

      if (element.mozRequestFullScreen) {
          // This is how to go into fullscren mode in Firefox
          element.mozRequestFullScreen();
      } else if (element.webkitRequestFullScreen) {
          // This is how to go into fullscreen mode in Chrome and Safari
          // Both of those browsers are based on the Webkit project, hence the same prefix.
          element.webkitRequestFullScreen();
      }
      // Hooray, now we're in fullscreen mode!
  }
</script>

<img class="fsElement" height="375" width="500" src="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" id="kittenPic"></img>
<br />
<button onclick="goFullscreen('kittenPic'); return false">Click Me To Go Fullscreen!</button>

</body>
</html>

Заранее спасибо!

  • опубликуйте скрипту Lie Ryan 30.07.2013
  • Или, что еще лучше, разместите здесь соответствующий код. Andrew Barber 30.07.2013
  • @Ли Райан и Эндрю Барбер: я сделал JFiddle, но он не поддерживал полноэкранный режим. Я знаю, что приведенный выше код работает, потому что я тестировал его как в Chrome, так и в Firefox. Я собирался сделать код чище, разбив его по языкам, но я думаю, что это будет более полезно, потому что теперь они могут легко сделать рабочий пример на своем компьютере. Это лучше? murk003 31.07.2013

javascriptcssnativefullscreen

Ответы

Ответ 1 · рейтинг 1 · Lie Ryan

Это из MDN: Использование полноэкранного режима

Различия в представлении

Здесь стоит отметить ключевое различие между реализациями Gecko и WebKit на данный момент: Gecko автоматически добавляет правила CSS к элементу, чтобы растянуть его на весь экран: width: 100%; высота: 100%. WebKit этого не делает; вместо этого он центрирует полноэкранный элемент того же размера на экране, который в остальном черный. Чтобы получить такое же полноэкранное поведение в WebKit, вам нужно добавить собственную ширину: 100%; высота: 100%; Правила CSS для элемента самостоятельно:

:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}

С другой стороны, если вы пытаетесь эмулировать поведение WebKit в Gecko, вам нужно поместить элемент, который вы хотите представить, внутри другого элемента, который вы вместо этого сделаете полноэкранным, и использовать правила CSS для настройки внутреннего элемент, соответствующий желаемому внешнему виду.

Рабочий пример на jsfiddle (редактировать). Большая часть CSS предназначена для центрирования элемента, адаптированного из этого ответа SO, вы можете избавиться от большей части CSS и двух слои div, если вам не нужно центрирование.

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы