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

Для тех из вас, кто не знает, собственный полноэкранный режим — это когда ваш браузер занимает весь экран вашего компьютера, как на этом пример. Я создал полноэкранное приложение 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>

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


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

Ответы (1)


arrow_upward
1
arrow_downward

Это из 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, если вам не нужно центрирование.

person Lie Ryan    schedule 31.07.2013
comment
Это работает, спасибо! Это очень креативное решение проблемы. :) - person murk003; 01.08.2013