CSS for fullscreen API don't work for me
Question
I have a page which contains a div that I would like to make full-screen when the user clicks a link.
I have tried doing this with CSS but it does not work
<html>
<head>
<title>DIV with full screen height</title>
<style>
#map-canvas {
height: 590px;
width:1100px;
border: 2px solid #326195;
margin: 5px;
}
html:-moz-full-screen #map-canvas {
height: 100%;
width:100%;
}
html:-webkit-full-screen #map-canvas {
height: 100%;
width:100%;
}
html:-ms-fullscreen #map-canvas {
height: 100%;
width:100%;
}
</style>
<script>
var element, fullscreenbtn;
function intializePlayer() {
element = document.getElementById('map-canvas');
fullscreenbtn = document.getElementById('fullscreenbtn');
// Add event listeners
fullscreenbtn.addEventListener('click', toggleFullScreen, false);
}
window.onload = intializePlayer;
var fullScreen = false;
function toggleFullScreen() {
debugger;
if (!element.fullscreenElement && // alternative standard method
!element.mozFullScreenElement && !element.webkitFullscreenElement) { // current working methods
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (element.cancelFullScreen) {
element.cancelFullScreen();
} else if (element.mozCancelFullScreen) {
delementocument.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
element.webkitCancelFullScreen();
}
}
}
</script>
</head>
<body>
<a href="#" id="fullscreenbtn" style="z-index: 10;">plein ecran</a>
<div id="map-canvas"></div>
</body>
</html>
4 answers
solution1
1 2015-05-25 14:33:48
Remove html in front of full-screen selectors and remove space between full-screen selectors and div selector:
:-moz-full-screen#map-canvas {
height: 100%;
width:100%;
}
:-webkit-full-screen#map-canvas {
height: 100%;
width:100%;
}
:-ms-fullscreen#map-canvas {
height: 100%;
width:100%;
}
solution2
0 2015-05-25 14:12:28
You should give to <body> and <HTML> height: 100%
CSS
body,html{
height: 100%;
margin:0;
padding:0;
}
Note: You always should give height:100%; to his parent to have full height
solution3
-1 2015-05-25 14:19:29
Try to do it:
#map_canvas{
position: absolute;
top: 0;
bottom: 0;
}
You also have to check if the page is allowed to understand HTML5, before tag you have to have:
<!doctype html>
solution4
-1 2015-05-26 08:34:03
#map-canvas:-webkit-full-screen { width: 100%; height: 100%; }
#map-canvas:-moz-full-screen { width: 100% ; height: 100%;}
#map-canvas:-ms-full-screen { width: 100% ; height: 100%;}
#map-canvas:-o-full-screen { width: 100% ; height: 100%;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.