diff options
| -rw-r--r-- | README.md | 8 | ||||
| -rw-r--r-- | css/reveal.css | 11 | ||||
| -rw-r--r-- | css/reveal.scss | 17 | ||||
| -rw-r--r-- | js/reveal.js | 10 | ||||
| -rw-r--r-- | package.json | 2 |
5 files changed, 25 insertions, 23 deletions
@@ -1205,7 +1205,7 @@ Reveal.initialize({ // Don't forget to add the dependencies dependencies: [ - { src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, + { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true }, { src: 'plugin/multiplex/master.js', async: true }, // and if you want speaker notes @@ -1235,7 +1235,7 @@ Reveal.initialize({ // Don't forget to add the dependencies dependencies: [ - { src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, + { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true }, { src: 'plugin/multiplex/client.js', async: true } // other dependencies... @@ -1277,7 +1277,7 @@ Reveal.initialize({ // Don't forget to add the dependencies dependencies: [ - { src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, + { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true }, { src: 'plugin/multiplex/client.js', async: true } // other dependencies... @@ -1301,7 +1301,7 @@ Reveal.initialize({ // Don't forget to add the dependencies dependencies: [ - { src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, + { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true }, { src: 'plugin/multiplex/master.js', async: true }, { src: 'plugin/multiplex/client.js', async: true } diff --git a/css/reveal.css b/css/reveal.css index 5de7b4c..d7442d6 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -8,13 +8,16 @@ /********************************************* * GLOBAL STYLES *********************************************/ -html, -body { +html { width: 100%; height: 100%; + height: 100vh; + height: calc( var(--vh, 1vh) * 100); overflow: hidden; } body { + height: 100%; + overflow: hidden; position: relative; line-height: 1; margin: 0; @@ -463,10 +466,6 @@ 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 7e75dde..c93276f 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -11,14 +11,17 @@ * GLOBAL STYLES *********************************************/ -html, -body { +html { width: 100%; height: 100%; + height: 100vh; + height: calc( var(--vh, 1vh) * 100 ); overflow: hidden; } body { + height: 100%; + overflow: hidden; position: relative; line-height: 1; margin: 0; @@ -559,16 +562,6 @@ $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 a658a3b..07a86e5 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -2068,6 +2068,16 @@ 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(); // Layout the contents of the slides diff --git a/package.json b/package.json index cb8a711..35fcc51 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "grunt-retire": "^1.0.7", "grunt-zip": "~0.17.1", "mustache": "^2.3.0", - "socket.io": "^1.7.3" + "socket.io": "^2.2.0" }, "license": "MIT" } |