HTML Используем HTML5 Full-Screen API

[Salvage]

HTML5 состоит из множества отдельных компонентов, сопровождённых специальными API. Среди них и Fullscreen API, который позволяет сделать то, что раньше мог только Flash: отобразить приложение в полно-экранном режиме.

Данная возможность может вам понадобиться, если вы создаёте видео плеер, галерею изображений или игру.

Самое классное во всём этом то, что использовать Fullscreen API очень просто.

Методы​

Fullscreen API состоит из множества методов. Благодаря следующей команде, можно вывести в полно-экранный режим отдельный элемент:

element.requestFullScreen()

Следующая команда сделает то же самое с элементом canvas с id = myCanvas:

Document.getElementById(“myCanvas”).requestFullScreen()

Теперь давайте рассмотрим, как можно выйти из полно-экранного режима:

document.cancelFullScreen()

Следующая запись вернёт true, если страница находится в полно-экранном режиме:

Document.fullScreen

Для того чтобы получить элемент, который задействован в полно-экранном режиме, нужно выполнить следующую команду:

document.fullScreenElement

Прошу обратить внимание, что перечисленные команды являются стандартными для Fullscreen API. Однако для того, чтобы данные механизмы работали в других браузерах, необходимо воспользоваться браузерными префиксами (IE и Opera вообще никак не поддерживают Fullscreen API).
Запуск полно-экранного режима

Для того, чтобы определить, каким браузером пользуется пользователь, напишем специальные проверки и поместим их в функцию:

function fullScreen(element) { 
  if(element.requestFullScreen) { 
    element.requestFullScreen(); 
  } else if(element.webkitRequestFullScreen ) { 
    element.webkitRequestFullScreen(); 
  } else if(element.mozRequestFullScreen) { 
    element.mozRequestFullScreen(); 
  } 
}

Если хотя бы один из методов вернёт true, то мы точно узнаем браузер пользователя и если в нём есть поддержка Fullscreen API, воспользуемся этим.

После этого, всё что нам остаётся сделать, так это переключить пользователя в полно-экранный режим:

// всю страницу 
var html = document.documentElement; 
fullScreen(html); 

 // специфический элемент страницы 
var canvas = document.getElementById('mycanvas'); 
fullScreen(canvas);

Сначала пользователю высветится окошко, чтобы он разрешил переключиться в другой режим, а затем, в зависимости от его решения, будет произведена та или иная операция
Выход из полно-экранного режима

Для выхода из полно-экранного режима нужно так же воспользоваться специальными методами с префиксами.

Особенность данных методов в том, что их нужно применить не к каким-то отдельным элементам, а к документу в целом:

function fullScreenCancel() { 
  if(document.requestFullScreen) { 
    document.requestFullScreen(); 
  } else if(document .webkitRequestFullScreen ) { 
    document.webkitRequestFullScreen(); 
  } else if(document .mozRequestFullScreen) { 
    document.mozRequestFullScreen(); 
  } 
} 

fullScreenCancel();

Псевдо-классы CSS
​

Благодаря специальным псевдо классам CSS, вы можете изменить размеры некоторых элементов страницы при переходе в полно-экранный режим:

/* изменяем размер шрифта */ 
:-webkit-full-screen { 
  font-size: 16px; 
} 
:-moz-full-screen { 
  font-size: 16px; 
} 

/*меняем отдельный элемент */ 
:-webkit-full-screen img { 
  width: 100%; 
  height: 100%; 
} 
:-moz-full-screen img { 
  width: 100%; 
  height: 100%; 
}

На заметку: нельзя перечислять селекторы через запятую. Браузеры пока этого не понимают:

/* это не сработает */ 
:-webkit-full-screen img,:-moz-full-screen img { 
  width: 100%; 
  height: 100%; 
}

Для того чтобы всё работало, каждый селектор с браузерным префиксом нужно поместить в отдельный блок.
Итог:

JavaScript API, на котором и работает интерактивность HTML5, довольно-таки прост в изучении и применении. Пока что есть конечно проблемы кроссбраузерности, но это дело времени. Изучать это дело можно уже сейчас.