After publishing my site, the layout displays correctly on desktop browsers. However, when I access the site using my iPhone XR, the layout breaks and appears as the desktop version instead of the mobile version.
Steps to Reproduce:
-
Publish a site using Figma Sites.
-
Open the site on an iPhone XR using Safari or Chrome.
-
Observe that the page initially shows the correct mobile layout for a brief moment, then switches to the desktop layout.
Expected Result:
The site should consistently render the mobile layout on mobile devices.
Actual Result:
The site briefly shows the correct mobile layout, but then switches to the desktop layout, breaking the design on mobile.
Additional Info:
-
The issue appears only on my iPhone XR.
-
Tested using browser developer tools (device simulator) — works fine.
-
A friend tested the same site on their phone and didn’t encounter the issue.
-
Suspect: device misidentification or viewport issue after initial load.
Environment:
-
Device: iPhone XR
-
Browser: Safari (also tested on Chrome, same issue)
-
OS: iOS 16.11