CODEWITHSUNDEEP
htmlcssreactjsresponsive-design
İlker
İlker

Reputation: 2090

Responsive design doesn't work on Iphones

First of all, this how chrome dev tools show it to me;

enter image description here

it looks normal and responsive, but I tried to send it to my friends and they sent me this;

enter image description here

As you can see, it's nothing like in my phone or chrome dev tools. Only in Iphones it looks like this. I have this code in index.html as well;

 <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />

I also made my friend download Chrome, but it's the same result.

Upvotes: 1

Views: 409

Answers (1)

user15349738
user15349738

Reputation:

Depending on the devices, the size of certain things may vary. What Iphone does your friend have as well as yourself? This is important because Chrome uses those ratios and sizes to give a representation of how it will/should look. From the picture on your computer, you are testing on an Iphone 6,7 and 8 plus, but based on where the time, battery, etc. icons are on the phone screenshot, It looks as if your friend has an Iphone 10 or later.

You may use CSS media queries in order to have more control over how things are being displayed. not an answer, just a suggestion, but I hope this helps :)

Upvotes: 1

Related Questions