5

我最近一直在为一个网站开发一个移动版本，如果检测到浏览器在移动设备上，我只是希望能够更改 CSS 文件。你可以在这里查看我以前的尝试，但我现在决定完成这项工作的最可行方法是专注于媒体查询。

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

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

我错过了这段代码吗？我已经尝试使用为此提供的许多教程，但似乎没有一个对我有帮助。我真的在这里遇到了死胡同，所以任何帮助都将不胜感激。

4

4 回答 4

6

默认样式表没有任何会阻止它被加载的属性。

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

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

于 2011-04-11T09:23:47.687 回答
2

min-device-width在 iOS 上完成条件对我有用。注意字设备。但是，即使没有 device 这个词，它在 android 上也能正常工作。

于 2012-07-23T14:30:21.097 回答
1

我在新闻网站上使用了引导程序，但它在 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 链接行与上面的行一样简单。

于 2013-08-31T10:12:31.090 回答
1

如果你有initial-scale=1.0and maximum-scale=1.0，那么它也有点多余user-scalable=0。将最大缩放设置为等于初始缩放意味着用户根本无法放大，因为它们从最大缩放开始。

于 2014-02-18T14:12:50.123 回答