Установка полного окна в полноэкранный режим в последних браузерах

Question

Я хотел, чтобы пользователи могли щелкать ссылку, чтобы сделать мою веб-страницу полностью полноэкранной, используя функцию RequestFullScreen, которую развертывают браузеры.Вы можете увидеть страницу здесь .Как и предполагалось здесь , я вызываю метод requestFullScreen для document.documentElement.Код выглядит следующим образом:

var el = document.documentElement
    , rfs = el.requestFullScreen
         || el.webkitRequestFullScreen
         || el.mozRequestFullScreen
         || el.msRequestFullScreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
}

Дело в том, что я получаю действительно странные артефакты при этом, в моем случае фон в основном черный (вы можете увидеть, если вы нажмете на ссылку).Я делаю что-то неправильно?Ручная настройка полноэкранного режима в браузере прекрасно работает во всех протестированных мной браузерах, что заставило меня задуматься о том, что documentElement почему-то недостаточно информативен.

Другими словами:

похоже на document.documentElement.mozRequestFullScreen не делает то же самое, что пользователь, настраивающий полноэкранный режим вручную.Какая разница?Почему эта разница вызывает проблемы?

Answer 1

Сделано это с помощью этой функции.

// Launch full screen
function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

Полный текст статьи

Answer 2

Я проверил сайт и запутался, код кажется нормальным, но вы можете попробовать это http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/