Mobile Web

Screen Orientation: Managing Screen Orientation State

This tutorial demonstrates how you can manage the screen orientation state.

This feature is supported in mobile applications only.

Warm-up

Become familiar with the Screen Orientation API basics by learning about:

Managing the Screen Orientation

To enhance the user interaction with the device, you must learn to manage the screen orientation. The application implemented below consists of buttons used to either lock the screen orientation to a specific state or release the lock. The current orientation state is also displayed on the screen.

Figure: Screen orientation application

Screen orientation application

  1. Define the text and button elements for the screen (the body of the HTML page):
    <body>
       <div class="main">
          <p>Current orientation is:</p>
          <p id="currentOrientation" class="current-orientation"></p>
        
          <button id="portrait-primary" class="button">Portrait primary</button><br>
          <button id="landscape-secondary" class="button">Landscape secondary</button><br>
          <button id="portrait-secondary" class="button">Portrait secondary</button><br>
          <button id="landscape-primary" class="button">Landscape primary</button><br>
          <button id="unlock-orientation" class="button">Unlock orientation</button>
       </div>
    </body>
    
  2. When the screen is loaded, the onload() method is called. Within the method, add an event listener to the screen object, and define the updateCurrOrrTxt() event handler to be called whenever the screen orientation changes. The event handler updates the text element containing the current screen orientation information on the screen.
    <script>
       function updateCurrOrrTxt() 
       {
          document.getElementById("currentOrientation").innerHTML = screen.orientation;
       }
    	
       window.onload = function() 
       {
          document.getElementById("currentOrientation").innerHTML = screen.orientation;
          screen.addEventListener("orientationchange", updateCurrOrrTxt, false);
    
  3. Use the onclick event handlers to react to the button clicks. For the first 4 buttons, use the lockOrientation() method to lock the screen orientation in place, and for the final button, use the unlockOrientation() method to release the orientation lock.

          document.getElementById("portrait-primary").onclick = function() 
          {
             screen.lockOrientation('portrait-primary');
          }
     
          /* The other 3 orientation buttons are handled similarly */
      
          document.getElementById("unlock-orientation").onclick = function() 
          {
             screen.unlockOrientation();
          }
       }
    </script>
    
  4. Define CSS styles in the <head> section of the document to make the application more eye-catching.
    <style type="text/css">
       * 
       {
          font-family: Lucida Sans, Arial, Helvetica, sans-serif;
       }
       .main 
       {
          font-size: 32px;
          text-align: center;
          margin-top: auto;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: auto;
       }
    
       .button 
       {
          font-size: x-large;
          margin-top: 25px;
          width: 80%;
          height: 50px;
       }
    
       .current-orientation 
       {
          font-size: xx-large;
          font-weight: bolder;
       }
    </style>
    

Source Code

For the complete source code related to this use case, see the following file:

Go to top