4 Replies Latest reply on Nov 28, 2011 3:42 AM by Juan-Antonio Martinez

    Best way to detect devices screen size?

      What is the best method via javascript to detect the devices screen size? I would like to always place items in the lower right hand corner (like exit button, etc). Is there a reliable javascript method for determining screen orientation as well as dimensions of the screen?

        • Re: Best way to detect devices screen size?
          Benedict Kennedy

          ScreenOrientation

          Screen Orientation can be detected by setting RhoElements's "screenOrientationEvent" from the "screenOrientation" module:

           

          /**
           * A function that sets up the webpage when it is first loaded.
           * Set the "onload" parameter of the <body> tag in the page's HTML to:
           *       <body onload="onPageLoad()">
           */
          function onPageLoad()
          {
               screenOrientation.screenOrientationEvent = "url('javascript:detectOrientation('%json')";
          }
          
          /**
           *  This function will change the layout of the elements of the screen when the device is rotated.
           */
          function detectOrientation(eventObject)
          {
               if(eventObject.orientation == 'normal' || eventObject.orientation == 'upsideDown');
               {
                     doLayoutPortrait();
               }
               else //event.orientation == 'rightHanged' || eventObject.orientation == 'leftHanded'
               {
                    doLayoutLandscape();
               }
          }
          

           

          Retrieving Screen Dimensions

          Screen dimensions can be retrieved via JavaScript in a couple of ways:

           

          /**
           *  This function shows the many ways of detecting the current screen dimensions
           */
          function detectScreenDimensions()
          {
               var screenWidth = screen.width; //The width of the screen itself
               var screenHeight = screen.height; //The width of the screen itself
          
               var availWidth = screen.availWidth; //The width available to the program
               var availHeight = screen.availHeight; //The height available to the program
                                                                                  //for example: screenHeight - height of windows toolbar if visible
          }
          
          • Re: Best way to detect devices screen size?
            Benedict Kennedy

            ScreenOrientation alternative

            An alternative way of detecting rotation changes is to set the onorientationchange function of javascript's window object:

            /** 
             * A function that sets up the webpage when it is first loaded. 
             * Set the "onload" parameter of the <body> tag in the page's HTML to: 
             *       <body onload="onPageLoad()"> 
             */  
            function onPageLoad()  
            {  
                 window.onorientationchange = detectOrientation();
            }
            
            function detectOrientation()
            {
                       if(screen.height > screen.width)
                       {
                                  //Device is in portrait rotation
                       }
                       else
                       {
                                  //Device is in landscape rotation
                       }
            }
            

             

            This only works if the autoRotate value is set to enabled in the screenOrientation module and if the device has IST (Interactive Sensor Technology).

              • Re: Best way to detect devices screen size?

                One problem of figuring out how the display is by checking if height is greater than width is original dimensions of device.

                This would not work on a "lanscaped" device, such as a ET1 or a VC (vehicle-mounted device)... or even a PC!

                 

                I'd rather save the original dimensions at load time, on two global variables, and then play with them and actual values.

                I'd even get the device model and then process this info, just in case terminal is rotated when page is loaded.

              • Re: Best way to detect devices screen size?
                Benedict Kennedy

                Keeping objects at the bottom of the screen

                A better solution for keeping objects like buttons on the bottom of the screen is to set the CSS "position" property to "fixed" and set the "top", "right", "bottom" or "left" buttons to the required value. This way the button will always remain at this position, no matter if the main content is larger than the screen (scrollable) or when the device is rotated:

                 

                <html>
                          <head>
                                    <style>
                                              #exitButton
                                              {
                                                        position: fixed;
                                                        bottom: 0;
                                                        right: 0;
                                                        z-index: 100;
                                              }
                                    </style>
                          </head>
                          <body>
                                    <button id="exitButton">Exit</button>
                          </body>
                </html>
                
                1 of 1 people found this helpful