Html Mobile Emulator根据媒体查询中指定的设备宽度选择了错误的样式表…为什么？

这是我的元标签

<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

我使用断点作为max-320然后是max-480，当我从320的设备宽度测试我的页面时，它工作正常，但是当使用480的设备宽度测试页面时，它仍然选择320宽度的样式表。为什么它选择了错误的样式表请帮助

<link rel="stylesheet" media="only screen and (max-width:320px) and (orientation:portrait)" href="style/xxs_p.css">
<link rel="stylesheet" media="only screen and (max-width:320px) and (orientation:landscape)" href="style/xxs_l.css">
<link rel="stylesheet" media="only screen and (min-width:321px) and (max-width:480px) and (orientation:portrait)" href="style/xs_p.css">
<link rel="stylesheet" media="only screen and (min-width:321px) and (max-width:480px) and (orientation:landscape)" href="style/xs_l.css">

---

这是我的代码中的一个问题，还是只是模拟器的行为怪异？请帮忙

尝试将代码更改为：

media="only screen and (max-device-width:320px) and (orientation:portrait)"

---

对于每一行。

我使用这个，它可以完美地工作：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=1">
<link href="/cssL.css" rel="stylesheet" type="text/css" media="(min-width:1000px)" />
<link href="/cssM.css" rel="stylesheet" type="text/css" media="(min-width:551px) and (max-width:999px)"  />
<link href="/cssS.css" rel="stylesheet" type="text/css" media="(max-width:550px)" />

---

您在视口元中使用了分号而不是逗号，这可能是造成问题的原因。

可能在innerWindow页面上添加了一些javascript，或者类似于emulator上的输出，它认为屏幕有多大，然后从那里开始工作。如果屏幕的大小符合预期，请检查您的code.javascript:viewportwidth=window.innerWidth，viewportheight=window.innerHeight并在页面上输出这些变量。使用最小或最大宽度其工作但使用两个限制它不是…原因是什么？？？工作感谢：…使用最小或最大宽度其工作但使用两个限制它不是…原因是什么？？？