I've come across this same question multiple times, but the solutions I've found so far haven't been helpful. My media queries are working perfectly on desktop, but they don't seem to take effect on three different android devices. It's as if the MQ isn't being recognized at all. I've tried using 'all', 'screen', 'screen only', and various other options, even changing my meta tag as shown below:
Meta:
<meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" name="viewport">
<link rel="stylesheet" href="style_mini.css">
@media handheld, screen and (max-width: 48em) { some style }
This is my first website, and I'm quite confused about what I might be doing wrong.
After spending several hours testing, it appears that both of my devices believe they have a width of 960px and are using the media query for that width instead of the smaller MQ. Following the suggestions mentioned here: didn't yield any positive results.
html {}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-text-size-adjust:none;
}
body {
font-family: 'Slabo 27px', serif;
color: #3F4D59;
background-color: #F2E9DE;
width: 98%;
margin: 0 auto;
}
.flex {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
}
...
... //rest of the CSS styles
...