Mobile/Tablet preview not applying correct styles

[laurelfulford]

Describe the bug
The tablet and mobile styles don't appear to be applied to the editor when using the 'Preview' options.

This may be a duplicate of #21193, but it's also happening non-externally loaded CSS, so I opted to create a separate issue in case the cause is different. If not, please feel free to close!

To reproduce
Steps to reproduce the behavior:

1. Running Gutenberg, and using a theme like Twenty Twenty, edit a post.
2. Click on Preview and pick Tablet. Compare font-size to front-end at that screen size.
3. Click on Preview and pick Mobile. Compare font-size to front-end at that screen size.

Expected behavior
That the font sizes would match between the preview and front end.

Screenshots
Tablet in editor:

Tablet on front-end (780px wide, like the editor preview and same browser size as above):

Mobile in editor:

Mobile on front-end (360px wide, like the editor preview and same browser size as above):

Editor version (please complete the following information):

• WordPress version: 5.4.2
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Gutenberg plugin
• If the Gutenberg plugin is installed, which version is it? 8.5.1

Desktop (please complete the following information):

• OS: OSX 10.14.6
• Browser: Firefox
• Version: 78.0.2

[carolinan]

I am not able to reproduce using Twenty Twenty on WP 6.0.1, with and without Gutenberg Version 13.7.0-rc.1.
The text size is reduced correctly both in the editor and front.

[kathrynwp]

@carolinan I took another look at this and I think I'm able still to replicate on heading tags within the body of the page/post content:

For example, here's what the page title, h2 and h3 look like in tablet preview in the editor:

While the page title remains the same size, the h2 and h3 are displayed larger when the page is viewed at the a 780 tablet device size on the front end (using Firefox inspector):

I was not able to replicate with Twenty Twenty-Two, however.

What do you think?

Tested with:

WordPress 6.0.1
Gutenberg 13.8.0 active or inactive
No other plugins active
Theme: Twenty Twenty 2.0

Firefox 103.0.1
macOS 12.2.1

[ellatrix]

This should be fixed by #33342.