iPhone not responding to media queries/meta tag-CodePudding

I have multiple (vanilla) CSS media queries on my NextJS website. The media queries work fine on my desktops browser, but when I open the website on my phone, the media queries do not work. I have checked caniuse.com, and all of the CSS properties I am using should work on Safari for iOS. For reference, I have the latest version of safari installed on my iPhone. I read on many sites that NextJS does not automatically have the following meta tag like react does and that it has to be put in manually:

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

I put that inside of my <Head></Head> tag in _app.tsx, but my phones browser is still not responding to the media queries.TYA!

Here is an example of a media query:

@media (max-width: 1200px) or (max-height: 700px) {
  body {
    background-color: var(--lightBlue);
  }
}

CodePudding user response：

I used or on multiple queries, which Safari on iOS does not support/respond to. Switching it with and or creating multiple queries works.

CodePudding user response：

To elaborate on my comment.

No need for two separate queries. You can also use a comma to separate two (or more) different rules in one query.

@media (max-width: 1200px), screen and (max-height: 700px) {
  body {
    background-color: var(--lightBlue);
  }
}

From MDN

You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states.