媒体查询无法在移动设备上运行，但在桌面设备上运行良好

Question

HTML head-

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

CSS媒体查询 -

@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

首先，大多数移动浏览器都不支持handheld，您可以在此问题中看到更多内容：Do iPhone / Android browsers support CSS @media handheld?

其次，@media的断点与任何移动设备屏幕尺寸都不匹配，此处是列出您可以查看的标准设备的媒体查询的网站：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/