Question 244066 in Html Question posted in
Some basic documentation can be found here.

Html – Why do my CSS media queries not work on all mobile devices?

I am attempting to use CSS media queries to change the appearance of my website on mobile and smaller screen sizes, but only some devices (some phones work, others do not) actually use the media query styles that I’ve defined.

In the head of my HTML I have the following meta tag

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

In my external stylesheet I have the following media query codeblock at the very end, which changes styles of previously defined classes:

@media all and (max-width: 920px) {
...
}

Devices I checked included my iPhone 14 Pro (used the media query correctly in Chrome and Safari), iPhone 13 (did not use the media query in either Chrome or Safari), Google Pixel 7 (did not use the media query in Chrome).

I tried changing the HTML meta tag to include additional scale information, and also tried using max-device-width instead of max-width in my CSS, but to no avail.

Please let me know if there appears to be anything wrong with my implementation of media queries.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I actually solved the issues. Parcel the compiler I've been using was automatically transforming my CSS, which did not have compatibility with older mobile browsers. I have since added a line to my package.json to accommodate older browers.


  2. 0

    Try adding this within the head tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">

    Very likely that some devices are attempting to scaled the content for you. Essentially, you want to "turn this off", so that you can control the process through media queries.

    Note: I re-read your question: you are probably on the right lines. Just try adding more parameters.

    I typically write media queries in this format:

    @media(max-width:1100px){
#id{width:110%}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search