1

我们仍然从 ie8 获得大量流量，但我们决心走响应式路线。过去，我们已经让媒体查询在 ie8 中工作，但使用我们最新的模板并没有成功。

我们在 html head 标签中的 CSS/viewport 设置：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" media="screen" href="/request/css/bootstrap.css">
<link rel="stylesheet" media="screen" href="/request/css/bootstrap-responsive.css">
<link rel="stylesheet" media="screen" href="/request/css/styles.css">

<script src="http://www.oursite.com/js/modernizr.custom.2.6.2.js"></script>
<!--[if (lt IE 9) & (!IEMobile)]>
      <script src="http://www.oursite.com/js/respond.min.js"></script>
<![endif]-->

我们的媒体查询语法（使用引导程序）：

@media (max-width: 767px) { }

我发誓这在过去有效，但现在没有。我们尝试了各种其他带有modernizr 自定义的polyfill，尝试了html5 shiv 来代替modernizr，尝试调整元视口设置，并尝试了不同的媒体查询语法（@media screen...）。我已经三重检查了 html 并验证了它。我们正在使用引导程序中的 row-fluid - 但它应该正确设置。我的想法不多了。帮助？

4

1 回答 1

0

我在新闻网站上使用了引导程序，但它在 IE8 上不起作用，我使用 css3-mediaqueries.js javascript 但仍然无法正常工作。如果您希望媒体查询与此 javascript 文件一起使用，请将屏幕添加到 css 中的媒体查询行

这是一个例子：

<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>
于 2013-08-31T10:09:18.687 回答