MENU


Screen Display

The window.screen object provides information about the screen display of the device. It can be used to lock the screen orientation in fullscreen mode and on apps.
RESETRUNFULL
<!DOCTYPE html><html><head></head><body>
   <script>
      function p(s){document.write(s+"<br/>");}
      p("height: " + screen.height);
      p("width: "+ screen.width);
      p("availTop: "+ screen.availTop);
      p("availLeft: "+ screen.availLeft);
      p("availHeight: "+ screen.availHeight);
      p("availWidth: "+ screen.availWidth);
      p("pixelDepth: "+ screen.pixelDepth);
      p("colorDepth: "+ screen.colorDepth);
      p("orientation: "+ screen.orientation.type);
      p("angle: "+ screen.orientation.angle);
      //screen.orientation.lock("portrait");  // Promise
      //screen.orientation.unlock();
   </script>
</body></html>
The window.visualViewport object provides information about the viewport (possibly of an iframe). Try resizing the iframe below.
RESETRUNFULL
<!DOCTYPE html><html><body style="height:400px">
   <p></p>
   <iframe src="/" style="position:absolute; left:100px;top:100px;resize:both;"></iframe>
   <script>
      function p(s){document.querySelector("p").innerHTML += s+"<br/>";}
      var ifv = document.querySelector("iframe").contentWindow.visualViewport;
      ifv.onresize = ifv.onscroll = function(e){
         document.querySelector("p").innerHTML="";
         p(ifv.width);
         p(ifv.height);
         p(ifv.offsetLeft);
         p(ifv.offsetTop);
         p(ifv.pageLeft);  // scroll position
         p(ifv.pageTop);   // scroll position
         p(ifv.scale);  // pinch-zoom scaling factor
      };
      visualViewport.onresize = function(e){
         document.body.style.transform = 'scale(' + (1.0/visualViewport.scale) + ')';
      }
   </script>
</body></html>
Clicking the image toggles the fullscreen mode. Note that any element can be displayed in fullscreen mode.
RESETRUNFULL
<!DOCTYPE html><html><body style="height:200px">
   <img src="/shared/puppy.jpg"/>
   <script>
   document.images[0].addEventListener("click", toggleFullScreen, false);
   function toggleFullScreen() {
      if (!document.fullscreenElement) {
         document.images[0].requestFullscreen(); // a Promise
      } else {
         if (document.exitFullscreen) {
            document.exitFullscreen();   // a Promise
         }
      }
   }
   </script>
</body></html>
The 'document.visibilityState' string indicates the current visibility state of the document. Its possible values are:
visible: The page content may be at least partially visible. In practice, this means that the page is the foreground tab of a non-minimized window.
hidden: The page's content is not visible to the user, either due to the document's tab being in the background or part of a window that is minimized or because the device's screen is off.
prerender: The page's content is being prerendered and is not visible to the user. A document may start in the prerender state, but will never switch to this state from any other state since a document can only prerender once.
unloaded: The page is in the process of being unloaded from memory.
function handleVisibilityChange() {
   if (document.visibilityState=="hidden") {
      pauseSimulation();
   } else {
      startSimulation();
   }
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);