# 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:** 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:** 7
**Page:** 1
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [January 7, 2024, 4:06am UTC](https://meta.discourse.org/t/ios-safari-browser-does-not-load-mobile-version-of-a-theme-component/290771/1 "2024-01-07T04:06:00Z")
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
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 7, 2024, 10:30am UTC](https://meta.discourse.org/t/ios-safari-browser-does-not-load-mobile-version-of-a-theme-component/290771/2 "2024-01-07T10:30:13Z")
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?
---
### Author:  [@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")
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
* * *
### 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
```
* * *
### 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
```
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 8, 2024, 9:31am UTC](https://meta.discourse.org/t/ios-safari-browser-does-not-load-mobile-version-of-a-theme-component/290771/4 "2024-01-08T09:31:31Z")
I suggest packaging this on GitHub to make things super easy for people to corroborate…
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 8, 2024, 9:34am UTC](https://meta.discourse.org/t/ios-safari-browser-does-not-load-mobile-version-of-a-theme-component/290771/5 "2024-01-08T09:34:29Z")
> [@fbpbdmin](#):
>
> on desktop browser, if view it `https://example.com?mobile_view=1`, it shows the small shape defined for Mobile.
What happens if you put this query string on safari mobile browser?
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [January 8, 2024, 6:51pm UTC](https://meta.discourse.org/t/ios-safari-browser-does-not-load-mobile-version-of-a-theme-component/290771/6 "2024-01-08T18:51:05Z")
> [@merefield](#):
>
> What happens if you put this query string on safari mobile browser?
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 !
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 8, 2024, 7:07pm UTC](https://meta.discourse.org/t/ios-safari-browser-does-not-load-mobile-version-of-a-theme-component/290771/7 "2024-01-08T19:07:27Z")
> [@fbpbdmin](#):
>
> this way with ?mobile\_view=1, it loads the mobile version in iphone safari browser
> hmm…
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)