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

Product Support
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>