iPhone Safari does not respond to max-width media query?

The question is, I’m trying to recover from a 20 years lag in CSS development and I thought working first on a site where I can’t change the HTML would be a perfect choice since I can work on the selector spec and from there move to more creative stuff.

Here is what I have now:

(sample, the links don’t work) https://brandelune.github.io/code/Visiting-Functions.html

and the css: https://brandelune.github.io/code/emacs.css

I’m trying to use a media query to target mobile browsers so I have that thingy here in the middle:

 @media(max-width: 40em) {  
        ...  
    }  

On the Safari/Firefox responsive simulators, the things work perfectly well. When I check the page on my iPhone 11 or even on my wife’s iPhone 6, I get the standard page with super small characters and no reaction to that max-width property.

And I have no idea what to do with that behavior… Where can I even start to debug that ?

It’s been a while since I had to deal with this issue, so I may be a little wobbly on the details, but this is what it boiled down to when I ran into a similar problem. iPhones are non-standard in their handling of CSS pixels vs device pixels. Screen resolutions improve (and vary significantly) so a “pixel” isn’t a standard size. I think that the new iPhones report their device width in portrait mode as something like 1024px. For most browsers on most devices, the difference between “device pixels” and “CSS pixels” isn’t really an issue. It’s compensated for. Apple, however, has a whole … thing about their screen resolution and therefor is a pain in the ass about it.

On reddit I was eventually told to just add a <meta name=“viewport” …> tag and then everything was fixed. It looks like there is a W3C working draft on the issue but it’s not a recommendation and neither Firefox nor Safari support the features:

https://www.w3.org/TR/css-device-adapt-1/

1 Like

I had the same question and this fixed it. Thank you for sharing :smiley: