See the viewport size 관련

Google Chrome > Article(s)

---

Article(s)

Firefox > Article(s)

---

Article(s)

Safari > Article(s)

---

Article(s)

• See the viewport size in the Console
• See the viewport size in the page

---

See the viewport size | Devtools Tips

---

See the viewport size

The size of the viewport that's used to render a webpage in a browser can be very important at times, such as when creating or debugging media queries.

You can easily know what the current size of the viewport is in DevTools. Here are two ways to do it.

---

See the viewport size in the Console

To display the viewport size in the Console tool:

1. Open the Console tool in DevTools.
2. Enter ${document.documentElement.clientWidth} x ${document.documentElement.clientHeight} in the prompt and press Enter.
   The size of the viewport, at the time you executed the expression, appears in the Console.

You can also use a live expression to see the size of the viewport in real-time, as you resize the browser window. To learn more, see Cut down on console noise using live expressions.

---

See the viewport size in the page

You can also see the size of the viewport^[1] in the page directly:

Chrome or Edge

1. Open DevTools.
2. Focus your attention in the top-right corner of the webpage, and then resize the browser window (or the DevTools panel). The viewport size appears as a temporary overlay, in the top-right corner of the webpage:

Chrome, with DevTools opened, the viewport size overlay appears in the rendered webpage

Firefox

1. Open DevTools and go to the Settings panel (F1).
2. Under [Available Toolbox] Buttons, select the [Toggle rulers for the page] setting.
   The Toggle rulers for the page icon appears in the DevTools toolbar.
3. Click the ruler icon to display rulers in the webpage.
   In addition to the top and left rulers which now are visible in the webpage, the viewport size is displayed in an overlay, in the top-right corner of the webpage.

Firefox, with DevTools opened, the viewport size overlay appears in the rendered webpage

Safari

1. Open Web Inspector and go to the Elements tool.
2. Hover over any node displayed in the DOM tree of the tool. On hover, rulers and the viewport size appear in the page temporarily.

You can also click the [Show rulers] icon in the toolbar of the Elements tool to make the rulers and viewport size overlay permanent.

Safari, with Inspector opened, the viewport size overlay appears in the rendered webpage

Polypane

1. The dimensions of each viewport are always shown above it. Edit these values to update the viewport.

Polypane, showing dimensions above each viewport

See also

• Quickly spot out-of-viewport elements

Debug popups that appear on hover

---

Devtools Tips > Debug popups that appear on hover

• Hide or pin the information tooltip while inspecting page elements
• Simulate different devices and screen sizes

---

이찬희 (MarkiiimarK)

Never Stop Learning.

---

1. In browsers with classic scrollbars, the number shown in the page by DevTools doesn't account for the scrollbar width, if there is one. The actual viewport width is about 15 to 17 pixels small than the number shown. ↩︎