DevTools Responsive mode reports incorrect viewport width after reload

[przwojwwp]

przwojwwp last edited by

Hello,

I have already reported this issue through Opera's official bug reporting system.
Reference: BS-104581

The issue occurs intermittently when “Responsive” is selected in the DevTools Device Toolbar.

When the issue occurs, reloading the page while “Responsive” mode is active may cause the layout viewport to be initialized incorrectly, even though the Device Toolbar still displays the expected dimensions.

For example, with Responsive mode set to 320 × 568, I observed:

window.innerWidth: 1868
document.documentElement.clientWidth: 1868
window.visualViewport.width: 1868
window.screen.width: 320

As a result, mobile CSS media queries do not match and the page is rendered as tablet/desktop.

Resizing the responsive viewport slightly immediately recalculates the viewport correctly.

The issue does not occur when a specific device preset is selected. Switching from “Responsive” to a phone preset and back to “Responsive” may also temporarily clear the issue.

Steps to reproduce:

1. Open DevTools.
2. Enable Device Toolbar.
3. Select “Responsive”.
4. Set the viewport to 320 × 568.
5. Reload the page.
6. When the issue occurs, the Device Toolbar still shows 320 × 568, but the layout viewport reports a much larger width.
7. Resize the responsive viewport slightly.
8. The viewport is immediately recalculated correctly.

Expected:
The layout viewport should always match the dimensions shown in Responsive mode after reload.

Control test:
Selecting a specific phone preset and reloading initializes the viewport correctly.

The issue is also reproducible with a standalone HTML file without React, Vite, SCSS or any framework.

Environment:
Opera One: 135.0.5973.41
Chromium: 151.0.7922.138
Windows 11 64-bit
Stable channel

Kind Regards