0

这是我的元标记...

<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">

这是我的代码中的问题还是只是模拟器表现得很奇怪？请帮忙！！

4

2 回答 2

0

我使用它，它工作得很好：

<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)" />

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

于 2014-11-16T14:23:06.580 回答
0

尝试将您的代码更改为：

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

对于每一行。

于 2014-11-16T14:19:10.950 回答