iOS safari browser does not load mobile version of a theme component?

Support
1

I have a theme component, it has css and Head defined for both Desktop and mobile.

on mobile, a shape is defined smaller for space.

it works nicely on chrome, firefox on iphone, but in safari, it loads the desktop version instead.
the safari browser is not loading desktop version of the site.
someone saw this issue ? iOS mobile safari does not report itself as a mobile browser ? or …

thanks

2

First confirm that by forcing it into mobile view, put this on the end of url:

https://example.com?mobile_view=1

The problem might not be what you think it is …

You ought also to state what version of Safari you are using?

1 Like
3

thanks @merefield

  • it is safari on iOS 17.1.2, when load the component, it shows the big shape defined for Desktop
    just updated iOS to latest 17.2.1, same.
  • on the same device, if open it using chrome or firefox, it shows the small shape defined for Mobile
  • on desktop browser, if view it https://example.com?mobile_view=1, it shows the small shape defined for Mobile.

I suspected there is something my safari browser loads the desktop content, but it is not, say it loads the mobile layouts, not desktop version.
did not notice this before, maybe I was using chrome most time on iphone…

to reproduce, I made this simplifed version to show the issue.

  • this sample code below basically show a big red circle in desktop browser, a smaller one in mobile browser.
  • after install this component, you could see
    it shows the small circle on iphone chrome/firefox, this is expected
    but a big one with safari, as defined for desktop browser. this is not expected
  • create a theme component, add contents below
    image
    image999×567 55.6 KB

Desktop

CSS

.deng-box1 {
    position: fixed;
    top: -30px;
    left: 180px;
    z-index: 1999;
}
 
.deng-box1 .deng {
    position: relative;
    width: 120px;      // bigger size !!!
    height: 90px;       // bigger size !!!
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

Head


<div class="deng-box1">
    <div class="deng">
    </div>
</div>

Mobile

CSS


.deng-box-mobile {
    position: fixed;
    top: 180px;
    left: -40px;
    z-index: 1999;
}

.deng-box-mobile .deng {
    position: relative;
    width: 60px;   // smaller size!!!!!!
    height: 45px;   // smaller size  !!!!!
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

Head

<div class="deng-box-mobile">
    <div class="deng">
    </div>
</div>
1 Like
4

I suggest packaging this on GitHub to make things super easy for people to corroborate…

5

What happens if you put this query string on safari mobile browser?

6

this way with ?mobile_view=1, it loads the mobile version in iphone safari browser
hmm…

will put it in a repo to easy to try/debug… thanks for your helps !

7

Ah, and before it wasn’t? That’s interesting!

Under 17.3 (PB) I am seeing the mobile version of my TC on my iPhone 11 without needing to force it (with that querystring)