BUG - iOS 设备上的 CSS 媒体查询

Question

I'm having problems with my CSS media queries on iOS devices. I tried with and iPhone 11 Pro (safari, xcode simulator) and and iPad Air 2 (Google Chrome)

https://docs.google.com/presentation/d/1aNMcbX73dEDlokOhm2XPBkEjxCH_2iINBV3BbAT9-q4/edit?usp=sharing

The first slide shows how my website looks on the default Chrome configuration; mobile. As you can notice, it takes the media queries from a smartphone, instead of the 1024px media query I wrote.

The second slide is after requesting desktop view how it should look according to the media queries.

The third slide shows media queries applies properly on Android phone and not properly on Safari on an iPhone simulator.

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

I wrote this html meta tag like this and nothing changes.

Source code if required.

https://github.com/erickcm2k/newProjectPortfolio/tree/master/portfolio

Answer 1

Update

Here is the path to my CSS reset file i got from: https://meyerweb.com/eric/tools/css/reset/

https://github.com/erickcm2k/newProjectPortfolio/blob/master/portfolio/src/Containers/reset.css

Everything worked fine after commenting this line

  -webkit-text-size-adjust: 62.5%; /* Line 205 */