Faking Max-Device-Width

Does Chrome,Firefox,etc specify max-device-width to mobile?

For better view port size , their standard and uses take a look at bellow links

"sizes for various devices"

for other trends look here

and yes do remember to include

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

How to fix css errors for min-device-width and max-device-width

No need to use "min-device-width"

@media only screen and (min-width: 375px) and (max-width: 667px) {
  body {
    font-size: 9.5pt;
  }
  div.content {
    width: 96ex;
    margin: 0;
  }
}
@media only screen and (min-width: 1200px) {
  body {
    font-size: 10pt;
    margin: 0 4em;
  }
  div.content {
    width: 96ex;
    margin: 0;
  }
}

How to simulate device-width and orientation in browser to test media queries?

Mobile device emulation is available as a built-in feature for Chrome, currently in the Beta channel. You need to enable it in the DevTools settings.

Media Queries not working properly to change the width

the min-width works if range is outside that specified px value and max-width works for that specified range.

I think it is because you are setting width:60% for both device size.
and you are using max-width:45px property on .calculator class so need to change that property in media query and if you want width of your calculator to fit the width of the display size you can remove that property of max-width.
You should try:
works when size of display is in range of 320px and change width according to your need

@media screen and (max-width: 320px){
  .calculator {
    max-width: 60%;
  }
}

works when size of display is greater than of 320px and change width according to your need

@media screen and(max-width: 320px) {
  .calculator {
    max-width: 60%;
  }
}

---

Related Topics