The 
Nor does it on Firefox's Responsive Design mode for iphone 7/8/9 Plus:
But If I make the firefox window one pizel bigger:
It suddenly works!
Additionaly - if I set my responsive browser window to exactly the same sizes as the iphone 6/7/8 - then it works fine. Which suggests that it's NOT the size - it's something about the iphone user-agent-string? Maybe?
What is going on and how to do I fix it?
CodePudding user response：
You need to add a meta tag in the head, for the browser to handle viewport zooming correctly:
<meta content="width=device-width, initial-scale=1" name="viewport">
Without the meta tag, the page is rendered at a higher screen width and then shrunk down to fit the device width. Hence the media queries will never be triggered.
More information on this can be found here.
CodePudding user response：
Add
<meta name="viewport" content="width=device-width, initial-scale=1">
in <head> tag of site
and it is better set standard max-width:768px instead of 600px for media-query
