How to Change the Screen Resolution

To change the screen resolution, on Windows go to Settings > System > Display > Display resolution, and on macOS open System Settings > Displays and pick a Scaled option. On Linux, use your desktop's Display settings or the xrandr command. For the sharpest image, always choose the resolution marked "Recommended", which is your monitor's native resolution, so every software pixel maps to one physical pixel.

Below we walk through the exact steps for each operating system, explain how resolution differs from the browser viewport that matters for web testing, and cover the common reasons a resolution refuses to change.

What Is Screen Resolution?

Screen resolution is the number of distinct pixels a display can show, written as width x height — for example, 1920x1080 means 1920 pixels across and 1080 down. More pixels mean a larger desktop area and finer detail, while fewer pixels make everything on screen appear bigger but less crisp.

Three related concepts are worth knowing before you change a setting:

• Aspect ratio — the shape of the screen, the ratio of width to height. Most modern monitors are 16:9 (1920x1080, 2560x1440), while ultrawides are 21:9. Picking a resolution with the wrong ratio stretches or letterboxes the image.
• Native resolution — the fixed pixel grid physically built into an LCD/OLED panel. Running at native gives the sharpest result; any other value forces the display to interpolate and looks softer.
• DPI and scaling — pixels per inch describes how densely packed the pixels are. High-DPI ("Retina", 4K) screens use OS scaling (125%, 150%, 200%) to keep text readable instead of tiny, so resolution and perceived size are not the same thing.

Method 1 - Change Resolution on Windows

On Windows 10 and Windows 11, screen resolution lives in the Display settings panel. The quickest route is to right-click an empty area of the desktop, though Settings works too. Follow these steps:

• Right-click anywhere on the desktop and select Display settings (or open Settings > System > Display).
• If you have more than one monitor, click the display you want to change at the top of the page.
• Scroll to Scale & layout and open the Display resolution drop-down.
• Select a resolution. The value labelled (Recommended) is your monitor's native resolution and gives the sharpest image.
• Windows previews the change and shows a confirmation. Click Keep changes within 15 seconds, or it reverts automatically if the screen looks wrong.
• If the resolution you need is missing, update your graphics driver — once the correct driver is installed, every supported mode appears in the list.

In the same Scale & layout section, the Scale drop-down (100%, 125%, 150%) controls how large text and icons appear without changing the pixel count — the better tool when you want things bigger but still crisp.

If a resolution you know the monitor supports still does not appear in the drop-down, open Advanced display > Display adapter properties > List All Modes. This dialog shows every resolution and refresh-rate combination the GPU and monitor accept, so you can select a mode the simplified panel hides. To change the refresh rate itself, use the Choose a refresh rate drop-down on the same Advanced display page — a higher rate (120Hz, 144Hz) makes motion smoother, and an asterisk next to a value means it is not supported at your current resolution.

Method 2 - Change Resolution on macOS

macOS hides raw resolution behind a set of friendly "Scaled" presets, since most Macs ship with high-DPI Retina displays. On macOS Ventura and later the panel is called System Settings; on older releases it is System Preferences.

• Click the Apple menu in the top-left corner and choose System Settings (or System Preferences).
• Select Displays from the sidebar.
• Under Resolution, click Scaled to reveal the layout presets, which range from "Larger Text" to "More Space".
• Pick a preset. macOS applies it instantly, so you can immediately see whether content is the right size.
• To see exact pixel values instead of presets, hold the Option key while clicking Scaled — this lists every supported resolution.

Because macOS changes resolution live without a confirmation timer, there is no risk of being locked out — simply choose a different preset if the first one is uncomfortable.

Method 3 - Change Resolution on Linux

On Linux the steps depend on your desktop environment, but every major one (GNOME, KDE Plasma, XFCE) has a graphical Display settings page. Open Settings > Displays (GNOME) or System Settings > Display and Monitor (KDE), choose a Resolution from the drop-down, and click Apply, then confirm to keep the change.

For scripting, headless setups, or resolutions the GUI does not list, the xrandr command on X11 gives precise control:

# List connected outputs and the resolutions each supports
xrandr

# Set a specific resolution on a named output (e.g. HDMI-1)
xrandr --output HDMI-1 --mode 1920x1080

# Add and apply a custom mode if it is not already available
xrandr --newmode "1600x900_60.00" 118.25 1600 1696 1856 2112 900 903 908 934 -hsync +vsync
xrandr --addmode HDMI-1 "1600x900_60.00"
xrandr --output HDMI-1 --mode "1600x900_60.00"

Replace HDMI-1 with the output name shown in the first xrandr command. On newer Wayland sessions, xrandr is limited, so prefer the desktop's built-in Display settings there.

Screen Resolution vs Browser Viewport

This distinction trips up a lot of web testers. Screen resolution is the physical pixel count of the display, but a webpage lays itself out against the browser viewport — the area of CSS pixels actually available to the page. The two are rarely the same number, for two reasons: browser chrome (tabs, address bar, scrollbar) eats into the screen, and OS scaling plus the device pixel ratio divide the physical pixels into fewer CSS pixels.

A quick example: a 2560x1440 monitor running at 150% scaling reports a CSS viewport width of roughly 1707 pixels, not 2560. So your media queries and responsive breakpoints fire on the viewport width, never the raw resolution. The list below shows how they diverge:

• 1920x1080: at 100% scaling (DPR 1.0), the approximate CSS viewport width is 1920.
• 2560x1440: at 150% scaling (DPR 1.5), the approximate CSS viewport width is 1707.
• 2880x1800 (Retina): at 200% scaling (DPR 2.0), the approximate CSS viewport width is 1440.

The practical takeaway: when you test a layout, target viewport widths (1440, 1280, 768, 375) rather than chasing physical resolutions. You can confirm the current viewport in any browser's DevTools or by typing window.innerWidth in the console. To learn how to build layouts that adapt to these widths, see how to test your website on different browsers across devices.

Common Mistakes and Troubleshooting

• Resolution drop-down is greyed out or shows only one option — this is a driver problem. Update or reinstall the GPU driver (Intel, NVIDIA, or AMD) from the vendor, then reboot to expose every supported mode.
• Text and icons look tiny after raising resolution — do not lower the resolution. Instead raise the scaling percentage (Windows Scale, macOS "Larger Text") so the image stays sharp while content gets bigger.
• The screen is blurry at the chosen resolution — you are not at native resolution. Switch back to the (Recommended) value; any non-native mode is interpolated and always looks softer.
• The desired resolution is missing entirely — the cable or port may be limiting bandwidth. A 4K 60Hz signal needs HDMI 2.0 or DisplayPort; an older HDMI cable can cap you at a lower mode.
• Black screen or "out of range" after applying — the monitor cannot display that mode. Wait 15 seconds for Windows to auto-revert, or boot into Safe Mode and reset the display.

Conclusion

Changing screen resolution is a few clicks on any OS: Settings > System > Display on Windows, System Settings > Displays on macOS, and Display settings or xrandr on Linux. Stick to the native, recommended resolution for the sharpest picture and adjust scaling rather than resolution when you just want bigger text. For web work, remember that the browser viewport — not the raw resolution — drives your layout, and validate that layout across real browsers and resolutions to catch responsive issues before your users do.

Frequently Asked Questions

How do I change the screen resolution on Windows 11?

Right-click the desktop and choose Display settings, or open Settings > System > Display. Under Display resolution, open the drop-down and pick a value, ideally the one marked Recommended. Click Keep changes when the preview confirms the screen looks correct.

How do I change resolution on a Mac?

Open System Settings (or System Preferences on older macOS), select Displays, then click Scaled. Choose a layout preset, or hold Option while clicking Scaled to reveal a full list of resolutions. macOS applies the change instantly, so you can revert if text looks too small.

Why is my screen resolution option greyed out?

A greyed-out or missing resolution almost always means a graphics driver problem. Update or reinstall your GPU driver from the manufacturer (Intel, NVIDIA, or AMD), reconnect the monitor cable, and restart. A correct driver exposes every resolution your display supports.

What is the recommended screen resolution?

The recommended resolution is your display's native resolution, the exact pixel grid built into the panel. Using it gives the sharpest image because each software pixel maps to one physical pixel. Common native values are 1920x1080, 2560x1440, and 3840x2160.

Does screen resolution match the browser viewport?

No. The browser viewport is the CSS pixel area available to a page, which is the screen resolution minus toolbars and divided by the device pixel ratio. A 2560-pixel-wide screen at 200% scaling gives a 1280 CSS-pixel viewport, so always test against viewport widths.

How do I change the refresh rate in Windows?

Open Settings > System > Display > Advanced display, then pick a value from the Choose a refresh rate drop-down. Only rates your monitor and current resolution support are listed; an asterisk marks a rate unavailable at that resolution. Higher rates such as 120Hz or 144Hz make scrolling and motion look smoother.

How do I change screen resolution on Linux from the terminal?

On X11, run xrandr to list connected outputs and supported modes, then apply one with xrandr --output HDMI-1 --mode 1920x1080, replacing the output name with yours. For a mode not listed, create it with xrandr --newmode and --addmode. On Wayland sessions, use the desktop's Display settings instead, as xrandr is limited there.

• How do I make my CSS code responsive?
• How do you change the breakpoint in CSS?
• How do you do cross browser testing for responsive design?
• How to hard refresh on Windows?
• Do all web browsers show the same websites?