Search code examples
cssmedia-queriestouchscreenresponsive

Media queries for breakpoints are effective only if touch simulation is on

I applied some media queries to my css. These appear to be effective only when browsing the website from the devices I designed them for, or when - while using the browser Responsive Design Mode - the touch simulation is turned on. If I simply drag the screen to reduce its size, the website doesn't appear to be responsive.

Any idea on why is happening?

These are the queries I'm using:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Style */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Style */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
  /* Style */
}

And here you can see the website GH repo: https://bianchinicecilia.github.io/ceciliabianchini/index.html

Thanks in advance for your help! :)

Solution

  • I think I can help you.

    You're using deprecated media queries. You don't need to use -device-, just min-width or max-width. I also noticed that your site is without the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">. This is very important too!

    Finally, review all meta tags because some sizes are conflicting.

    List of media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    About Viewport: https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts