Question

我最近一直在为网站开发移动版本，并且如果检测到浏览器在移动设备上，则非常希望能够更改CSS文件。您可以查看我以前的尝试here，但我现在已经确定完成此操作的最可行方法是关注媒体查询。

我遇到的问题是媒体查询根本不起作用。它总是加载默认样式表。这是我的代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

我错过了这段代码吗？我已经尝试使用为此提供的许多教程，但似乎没有人帮助我。我真的死在这里，所以任何帮助都会受到大力赞赏。

Answer 1

默认样式表没有任何可以阻止加载的属性。

你可以给它media="screen and (min-width: 481px)"，但这会导致危险，旧的浏览器也不会加载它。

通常最好是加载默认样式表并确保移动样式表覆盖默认样式表中不需要的任何内容。

Answer 2

使用min-device-width完成条件，在iOS上为我工作。注意单词设备。然而，即使没有单词设备，它在Android上也能正常工作。

Answer 3

我在新闻网站上使用了bootstrap，但它在IE8上不起作用，我使用了css3-mediaqueries.js javascript但仍然无效。如果您希望媒体查询使用此javascript文件添加屏幕到css

中的媒体查询行

这是一个例子：

<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="css3-mediaqueries.js"></script>

<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

css链接线就像上面一行一样简单。

Answer 4

如果您有initial-scale=1.0和maximum-scale=1.0，那么拥有user-scalable=0也有点多余。将最大比例设置为等于初始比例意味着用户无法放大，因为它们以最大缩放开始。

CSS3媒体查询无效

4 个答案: