diff options
| -rw-r--r-- | css/reveal.css | 4 | ||||
| -rw-r--r-- | css/reveal.scss | 10 | ||||
| -rw-r--r-- | js/reveal.js | 7 |
3 files changed, 21 insertions, 0 deletions
diff --git a/css/reveal.css b/css/reveal.css index 625fe6f..8acd961 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -474,6 +474,10 @@ body { -ms-touch-action: none; touch-action: none; } +@media only screen and (orientation: landscape) { + .reveal.ua-iphone { + position: fixed; } } + .reveal .slides { position: absolute; width: 100%; diff --git a/css/reveal.scss b/css/reveal.scss index 4a953fd..8f5ac5b 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -569,6 +569,16 @@ $controlsArrowAngleActive: 36deg; 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 { position: absolute; width: 100%; diff --git a/js/reveal.js b/js/reveal.js index 186a999..17d1323 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -530,6 +530,13 @@ dom.wrapper.classList.remove( 'no-hover' ); } + if( /iphone/gi.test( UA ) ) { + dom.wrapper.classList.add( 'ua-iphone' ); + } + else { + dom.wrapper.classList.remove( 'ua-iphone' ); + } + // Background element dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null ); |