Rspack is currently ignoring mobile responsive styles, causing it to render a tiny "desktop view" on iPhones / phones

Root Cause Analysis

Missing Viewport Meta Tag in Production: Based on the screenshots, the browser is rendering at a default desktop width (~980px) and scaling down. This only happens when the <meta name="viewport"> tag is missing or ignored. While client/head.html contains the tag, the Rspack Production Build may be bypassing standard Meteor head.html bundling, or the production URL is utilizing a different HTML template that lacks this critical tag.

URL of the Production website can be provided via PM if Meteor team wants to quickly test it.

@nachocodoner - this is another problem for your ever growing list :wink:

UPDATE:

:hammer_and_wrench: The Solution

I have moved the viewport definition directly into the Svelte root layout (App.svelte).

  • Guaranteed Injection: By using <svelte:head>, we force the browser to recognize the correct device width as soon as the JS app loads.
1 Like