Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Screen Object

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Screen Object

      Window Screen Object

      The screen object in JavaScript is a property of the 'window' object. The 'screen' object's properties contain information about the device's screen. The screen object can be accessed by using the window.screen syntax. We can also access it without using the window object.

      Screen Object Properties

      The screen object has a number of properties that provide information about the screen's orientation, resolution, and more. These properties can be used to develop applications that are responsive to different screen sizes and orientations.
      Following are some properties of the JavaScript screen object −
      • width − The width of the screen in pixels.
      • height − The height of the screen in pixels.
      • availWidth − The width of the screen, minus the width of the window taskbar.
      • availHeight − The height of the screen, minus the height of the window taskbar.
      • colorDepth − The number of bits per pixel that the screen can display.
      • pixelDepth − The number of bits per pixel that the screen is actually using.

      Screen Object Property Syntax

      Follow the syntax below to use the property of the screen object in JavaScript −
      window.screen.property;
      OR
      screen.property;
      You may or may not use the 'window' object to access the screen object.

      Example

      In the example below, we access the various properties of the screen object with referencing the screen as the property of window object.
      <html>
      <body>
         <p> Screen Information </p>
         <div id = "output"> </div>
         <script>
            document.getElementById("output").innerHTML = 
      	  "screen height: " + window.screen.height + "<br>" + 
            "screen width: " + window.screen.width + "<br>" + 
            "screen colorDepth: " + window.screen.colorDepth + "<br>" +
            "screen pixelDepth: " + window.screen.pixelDepth + "<br>" +
            "screen availHeight: " + window.screen.availHeight + "<br>" +
            "screen availWidth: " + window.screen.availWidth;
         </script>
      </body>
      </html>

      Output

      Screen Information
      screen height: 864
      screen width: 1536
      screen colorDepth: 24
      screen pixelDepth: 24
      screen availHeight: 816
      screen availWidth: 1536

      Example

      In the below code, we access the various properties of the screen object and observe their value. In this example we are not referencing the window object to access the screen object.
      <html>
      <body>
         <p> Screen Information </p>
         <div id = "output"> </div>
         <script>
            document.getElementById("output").innerHTML = 
      	  "screen height: " + screen.height + "<br>" + 
            "screen width: " + screen.width + "<br>" + 
            "screen colorDepth: " + screen.colorDepth + "<br>" + 
            "screen pixelDepth: " + screen.pixelDepth + "<br>" + 
            "screen availHeight: " + screen.availHeight + "<br>" + 
            "screen availWidth: " + screen.availWidth;
        </script>
      </body>
      </html>

      Output

      Screen Information
      screen height: 864
      screen width: 1536
      screen colorDepth: 24
      screen pixelDepth: 24
      screen availHeight: 816
      screen availWidth: 1536
      Please note that we get the same information about the screen in the above two examples.

      Screen Object Properties List

      Below, we have covered all properties of the 'screen' object with a description. You need to use the 'screen' as a reference to access these properties.
      Property
      Description
      availHeight
      It gives the height of the screen without including the taskbar.
      availWidth
      It gives the width of the screen without including the taskbar.
      colorDepth
      It gives the depth of the color palette to display images.
      height
      It returns the total height of the screen.
      pixelDepth
      It is used to get the color resolution of the screen.
      width
      To get the total width of the screen.