[BUG?] Media queries get stuck/ignored when switching between portrait and landscape mode on mobile

Description:

I set up tailwind breakpoints and font-size change on the body global element. The body font-size grows at the tablet breakpoint (min-width: 768px). Thus, most modern phones surpass this width when in landscape mode.

2 problems:

  1. The font-size does not grow when switching from portrait to landscape
  2. The font-size grows when switching back from landscape to portrait

So the font resize seems to be working in the opposite direction. This only happens when viewing the website on an physical phone, not on the PC in responsive mode.

Step-by-step reproduction instructions:

  1. Open the Post Editor/Site Editor
  2. Activate tailwind and tailwind breakpoints (mobile-first)
  3. Set a small(er) font size for the base breakpoint (mobile portrait)
  4. Set a great(er) font size for the tablet breapoint
  5. Add a couple text-based blocks for testing
  6. Save and view the website on your phone and confirm that the font resizing works in the opposite direction as expected

Screenshots, screen recording, code snippet

Environment info

  • WordPress version: 6.6.2
  • Cwicly Plugin version: 1.4.2