JavaScript Screen width Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word WIDTH

Definition

Screen.width is a read-only property that returns the full width of the screen in CSS pixels (MDN). Access it as window.screen.width.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use screen.width. Start with this line.

JavaScript
window.screen.width
CallWhat it does
window.screen.widthPrimary signature.

Built into the browser. Read screen.width on window.screen — no import required.

Library declarations
JavaScript
window.screen.width

Parameters

ParameterDescription
widthRequired. Read-only number — full width in CSS px
ComparisonOptional. Use availWidth / innerWidth for context

Return Value

Return ValueDescription
*The current value of screen.width.

JavaScript Examples

Example 1 — Read screen.width

Log the full screen width and confirm it is a number.

JavaScript
console.log(window.screen.width);
console.log(typeof screen.width);
Try It Yourself

How It Works

  1. Get the Screen object. window.screen describes the display for this window.
  2. Read the property. width is the full horizontal size in CSS pixels.
  3. Check the type. typeof screen.width is "number".
  4. Your value differs. Resolution and OS scaling change the number you see.

Example 2 — MDN 1024×768 Check

Crude way to check that the screen is at least 1024×768 — MDN’s teaching example.

JavaScript
if (window.screen.width >= 1024 && window.screen.height >= 768) {
  console.log("Resolution is 1024x768 or above");
} else {
  console.log("Resolution is below 1024x768");
}
Try It Yourself

How It Works

  1. Read width and height. Both are full screen sizes in CSS pixels.
  2. Compare with thresholds. MDN uses 1024 and 768.
  3. Both must pass. && means width and height must meet the bar.
  4. Keep it crude. Prefer CSS media queries for real responsive layout.

Example 3 — Screen Width vs Window Viewport

Do not mix up monitor width with this tab’s viewport width.

JavaScript
console.log({
  screenWidth: screen.width,
  availWidth: screen.availWidth,
  innerWidth: window.innerWidth
});
Try It Yourself

How It Works

  1. Screen metrics. width / availWidth describe the display.
  2. Window metric. innerWidth is the layout viewport of this tab.
  3. Resize the browser. Only innerWidth changes; screen values stay put.
  4. Rule of thumb. Layout → innerWidth; display size → screen.width.
Compatibility

Browser Support

Screen.width is Baseline Widely available (MDN: since July 2015). It works in all modern desktop and mobile browsers.

✓ Baseline · Widely available

Screen.width

Full screen width in CSS pixels — supported everywhere you teach modern JavaScript.

98% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
screen.width Excellent

Bottom line: Safe for production. Use width for full display width; availWidth for usable horizontal space; innerWidth for this window’s viewport.

Frequently Asked Questions

A read-only number: the full width of the screen in CSS pixels. Access it as window.screen.width or screen.width.
No. MDN marks it as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
screen.width is the full screen width. availWidth is the space available for web content and is never larger—often smaller when OS chrome reserves horizontal space.
No. width is the monitor’s full width. innerWidth is this browser window’s viewport width and changes when you resize the tab.
No. It is read-only. You read the value; assigning to it has no effect for web content sizing.
Use screen.height for the full screen height in CSS pixels—the vertical twin of width.

Next: lockOrientation()

See the older Screen method for locking orientation (prefer ScreenOrientation.lock).

lockOrientation() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Screen pixelDepth Property JavaScript Screen lockOrientation() Method