I just noticed my website UI seems to load correctly everywhere except one very specific situation. When my url is clicked from a post on Facebook mobile (actually, only tested on Facebook Lite on Android), FB opens the link within the FB app, and something about that process breaks the responsive layout of my page. Every other test of my page loaded correctly, at any screen size on any browser.
Further, I noticed that clicking links listed in a FB business profile does not reproduce the problem. Links from a FB profile “details” section show a message “opening in chrome” and load correctly, but links clicked from a FB post didn’t say chrome at the top and the page loaded with some of the elements crammed, overlapping each other. It looks as though fb app thought the screen resolution was slightly bigger than it actually was.
I’m guessing the FB app is consuming a few pixels of width itself but using your actual screen resolution to set the size, so it’s really loading the wrong version of your page, which might matter if your page elements are always close to filling the screen? Idk, but this is a good reminder that you never know what app might be loading your page instead of a popular web browser, and it’s a good idea to keep some extra buffer space if you have elements that need conditionals to adjust for screen size (this page has a custom calendar with cell text that I want to keep as large as possible on smaller screens).