ReactJS website opens up as desktop version by default in IOS, changes to mobile version when requested Desktop version

user_8682873 0
Viewed 918

Website link: https://www.ymgrad.com

The website is behaving a bit weird on iPhones. Please note: This behavior is not showing on Androids, but only on iPhones. The issue persists amongst all browsers - tested on Chrome, Safari, Opera Mini on two different iPhone X phones.

What's the issue?

When I open up the website, by default the browsers try to open the mobile version loads. However, to my surprise, this looks like the desktop version instead. What's even more surprising is that if I request the Desktop version of the website, the mobile version shows up instead (which should have shown by default anyway).

I've been dealing with this for a couple of months now, and I am finally posting this here.

Images which show what I'm talking about:

  1. Default Loaded website version is desktop version even though the phone thinks it is mobile version.

Default Loaded website version is desktop version even though the phone thinks it is mobile version.

  1. When requested desktop version, the browser shows mobile version.

When requested desktop version, the website version is mobile version.

reactjs django ios
1 Answers

Seems like you need to specify the correct meta viewport values.

Your initial HTML has a correct meta viewport value:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

enter image description here

But, it seems like something is changing the value of it to:

<meta name="viewport" content="width=1024">

Which causes the width of the web site to be always 1024.

wrong meta viewport value

Without having access to your source code, it's hard to identify the specific cause of this. My suggestion is to try finding which code of yours is changing the value of your meta viewport tag to width=1024.

user_46629330
Related