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

**URL:** <https://meta.discourse.org/t/ios-safari-browser-does-not-load-mobile-version-of-a-theme-component/290771>\
**Category:** Product Support\
**Created:** [January 7, 2024, 4:06am UTC](https://meta.discourse.org/t/ios-safari-browser-does-not-load-mobile-version-of-a-theme-component/290771 "2024-01-07T04:06:00Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)\
**Post date:** [January 8, 2024, 3:51am UTC](https://meta.discourse.org/t/ios-safari-browser-does-not-load-mobile-version-of-a-theme-component/290771/3 "2024-01-08T03:51:44Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/2/d/2/2d20b8a10b4ac9fa5773e830b4f6d6b310774fc0.png)

* * *

### Desktop

#### CSS

```plaintext
.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

```plaintext

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

```

* * *

### Mobile

#### CSS

```plaintext

.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

```plaintext
<div class="deng-box-mobile">
    <div class="deng">
    </div>
</div>

```

---

_[View the full topic](https://meta.discourse.org/t/ios-safari-browser-does-not-load-mobile-version-of-a-theme-component/290771)._