correct height of reveal.js on mobile devices, fixes vertical overflow

edit
Hakim El Hattab 2019-01-22 09:45:33 +01:00
parent c36caef5e7
commit 5002304fb1
3 changed files with 12 additions and 14 deletions

View File

@ -12,6 +12,7 @@ html,
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
height: calc( var(--vh, 1vh) * 100);
overflow: hidden; } overflow: hidden; }
body { body {
@ -463,10 +464,6 @@ body {
-ms-touch-action: none; -ms-touch-action: none;
touch-action: none; } touch-action: none; }
@media only screen and (orientation: landscape) {
.reveal.ua-iphone {
position: fixed; } }
.reveal .slides { .reveal .slides {
position: absolute; position: absolute;
width: 100%; width: 100%;

View File

@ -15,6 +15,7 @@ html,
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
height: calc( var(--vh, 1vh) * 100 );
overflow: hidden; overflow: hidden;
} }
@ -559,16 +560,6 @@ $controlsArrowAngleActive: 36deg;
touch-action: none; touch-action: none;
} }
// Mobile Safari sometimes overlays a header at the top
// of the page when in landscape mode. Using fixed
// positioning ensures that reveal.js reduces its height
// when this header is visible.
@media only screen and (orientation : landscape) {
.reveal.ua-iphone {
position: fixed;
}
}
.reveal .slides { .reveal .slides {
position: absolute; position: absolute;
width: 100%; width: 100%;

View File

@ -2065,6 +2065,16 @@
if( !config.disableLayout ) { if( !config.disableLayout ) {
// On some mobile devices '100vh' is taller than the visible
// viewport which leads to part of the presentation being
// cut off. To work around this we define our own '--vh' custom
// property where 100x adds up to the correct height.
//
// https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
if( isMobileDevice ) {
document.documentElement.style.setProperty( '--vh', ( window.innerHeight * 0.01 ) + 'px' );
}
var size = getComputedSlideSize(); var size = getComputedSlideSize();
// Layout the contents of the slides // Layout the contents of the slides