1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tests plein ecran retaille</title>
<style>
.group{
display: flex;
flex-direction: column;;
}
.ligne{
display: flex;
flex-direction: row;
}
</style>
</head>
<body backgroundColor=Ivory>
<div id='main' class='group'>
<div id='heightgrp' class='ligne'>
<label> InnerHeight </label>
<input id='height' type='text'></input>
</div>
<div id='widthgrp' class='ligne'>
<label> InnerWidth </label>
<input id='width' type='text'></input>
</div>
</div>
<button id=FSbutton> Full Screen</button>
<script type="text/javascript">
var FullScreen = false;
onresize = function()
{
document.getElementById('height').value = window.innerHeight;
document.getElementById('width').value = window.innerWidth;
};
document.getElementById('FSbutton').onclick = function(){
if (!FullScreen){
this.innerHTML='Normal Screen';
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen();
}
FullScreen = true;
}
else{
this.innerHTML='Full Screen';
if (document.exitFullscreen) { /* for different navigator */
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
FullScreen = false;
}
};
</script>
</body>
</html> |
Partager