diff --git a/cmd/present/static/slides.js b/cmd/present/static/slides.js index f055bb5070..df10647e8a 100644 --- a/cmd/present/static/slides.js +++ b/cmd/present/static/slides.js @@ -441,9 +441,34 @@ function handleBodyKeyDown(event) { } }; +function scaleSmallViewports() { + var el = document.querySelector('.slides'); + var transform = ''; + var sWidthPx = 1250; + var sHeightPx = 750; + var sAspectRatio = sWidthPx / sHeightPx; + var wAspectRatio = window.innerWidth / window.innerHeight; + + if (wAspectRatio <= sAspectRatio && window.innerWidth < sWidthPx) { + transform = 'scale(' + window.innerWidth / sWidthPx + ')'; + } else if (window.innerHeight < sHeightPx) { + transform = 'scale(' + window.innerHeight / sHeightPx + ')'; + } + el.style.transform = transform; +} + function addEventListeners() { document.addEventListener('keydown', handleBodyKeyDown, false); -}; + var resizeTimeout; + window.addEventListener('resize', function() { + // throttle resize events + window.clearTimeout(resizeTimeout); + resizeTimeout = window.setTimeout(function() { + resizeTimeout = null; + scaleSmallViewports(); + }, 50); + }); +} /* Initialization */ @@ -466,13 +491,15 @@ function addGeneralStyle() { var el = document.createElement('meta'); el.name = 'viewport'; - el.content = 'width=1100,height=750'; + el.content = 'width=device-width,height=device-height,initial-scale=1'; document.querySelector('head').appendChild(el); var el = document.createElement('meta'); el.name = 'apple-mobile-web-app-capable'; el.content = 'yes'; document.querySelector('head').appendChild(el); + + scaleSmallViewports(); }; function handleDomLoaded() { diff --git a/cmd/present/static/styles.css b/cmd/present/static/styles.css index bd24e4c081..2d8d3544d1 100644 --- a/cmd/present/static/styles.css +++ b/cmd/present/static/styles.css @@ -11,10 +11,9 @@ display: block !important; height: 100%; - min-height: 740px; + height: 100vh; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden; background: rgb(215, 215, 215); background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));