Ensure device preview is always accurate when window is zoomed in

[tellthemachines]

What?

Fixes #81072

I've tested this on Firefox on macOS and (via playground PR tester) Chrome on Windows 11, with varying zoom levels. In both cases this change seems to fix the bug.

Testing Instructions

1. On macOS use Firefox; on Windows Chrome or Firefox to test
2. Open the post editor and set the window zoom level to a bit higher than 100% by pressing cmd + or ctrl +
3. Add some blocks to the post and set some tablet and mobile styles for them
4. Save and set preview back to desktop
5. Now, try setting preview to tablet and mobile again. The previously set responsive styles should be visible.

Use of AI Tools

I used codex/gpt 5.6 sol to make the code changes. Reviewed and tested by me.

[github-actions]

Size Change: +79 B (0%)

Total Size: 7.81 MB

📦 View Changed

Filename	Size	Change
build/scripts/editor/index.min.js	509 kB	+79 B (+0.02%)

_{compressed-size-action}

[tellthemachines]

this is a very edge casey scenario but I guess we'd better account for it 🤷

[github-actions]

Flaky tests detected in 9a9011d.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/30972124986
📝 Reported issues:

• [Flaky Test] should render an autosave that is absent from the revisions collection #81157 in /test/e2e/specs/editor/various/revisions.spec.js

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: jennydupuy <jdy68@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

LGTM!

It was a bit difficult to reproduce, but on my Windows machine, I have the display scaling set to 125%. By changing the Chrome browser's zoom level to 150%, I was able to confirm this issue.

Before

The canvas width is 782.4px on tablets, so the styles for tablets are not applied.

After

The canvas width is 780.8px, and the styles for tablets are correctly applied.

Let's ship this PR to 7.1 RC1.

[github-actions]

There was a conflict while trying to cherry-pick the commit to the wp/7.1 branch. Please resolve the conflict manually and create a PR to the wp/7.1 branch.

PRs to wp/7.1 are similar to PRs to trunk, but you should base your PR on the wp/7.1 branch instead of trunk.

# Checkout the wp/7.1 branch instead of trunk.
git checkout wp/7.1

# Create a new branch for your PR.
git checkout -b my-branch

# Cherry-pick the commit.
git cherry-pick 04f245f71de1a32c2daa0f5d581ed457b6229e3f

# Check which files have conflicts.
git status

# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue

# Push the branch to the repository
git push origin my-branch

# Create a PR and set the base to the wp/7.1 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

[t-hamano]

Manual backport: #81215

[jennydupuy]

This is an issue related to accessibility, so it's great.
Thank you.

[jennydupuy]

In WordPress 7.1-beta4-63014, when you zoom in (for example, to 130%) in the browser (Firefox), the styles display correctly based on the selected device. This is not the case with Chrome (with 125%).
However, if I leave the system zoom level at 125%, the problem isn't resolved at all for me, neither in Firefox nor in Chrome.

[t-hamano]

@jennydupuy, I don't think this PR is included in WordPress 7.1-beta4-63014 yet. RC1 is scheduled to be released in a few hours, so please test that.

[jennydupuy]

My bad!
Yes the version 7.1 RC1 fix the issue!

[tellthemachines]

Thanks for merging and syncing to core @t-hamano !