媒体查询不适用于移动设备，但在台式机上效果很好

Question

HTML head-

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

CSS media query-

@media handheld, screen 
  and (min-width: 200px)
  and (max-width: 399px){}

Answer 1

我不知道您为什么使用掌上电脑。

@media only screen and (min-width:300px) and (max-width :399px) { }

Answer 2

First, handheld is not supported by most mobile browsers, you can see more from this question: Do iPhone / Android browsers support CSS @media handheld?

Second, the breakpoint of your @media doesn't quite match any mobile screen size, here a website listing media queries for standard devices that your can check on: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/