Question

我有一个网站，其中包含使用带断点的媒体查询的响应式网格系统。在IE8上，我已经看到“移动版本”作为默认视图，即使屏幕尺寸设置为应该是标准桌面尺寸（大于960px宽）。

是否存在导致此问题发生的已知问题（和修复）？

感谢您的帮助，一如既往。

----编辑----

我的媒体查询是如何设置的：

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

Answer 1

IE8 doesn't support media queries，所以它可能正在处理所有CSS规则，即使那些全宽屏幕也不应该。但

要防止出现此问题，请在每个only规则（@media）之后添加@media only screen ...关键字。

然后，您可以在所有网页的<head>部分获得支持，包括精彩插件 respond.js

Answer 2

这取决于你如何构建你的代码（因为你发布了没有，很难说出什么是错的;））。但可能的问题是，您首先定义了移动布局，并且IE8中的媒体查询＆gt; 960不会触发。像这样：

 body { // Default width for all browsers
   width: 300px; 
 }

 @media only screen and (min-width : 960px) { // Only for supporting desktops
   body {
     width: 960px;
   }
 }

（对于不支持它们的浏览器，请始终使用'默认'css（不使用媒体查询）。）

一种处理方法可能是默认使用960px宽的布局：

 body { // Default width for all browsers
   width: 960px; 
 }

 @media only screen and (min-width : 1400px) { // Widescreen monitors
   body {
     width: 1400px;
   }
 }

 @media only screen and (max-width : 300px) { // Mobile layout
   body {
     width: 300px;
   }
 }

你必须指定更多然后只是身体，但这应该给你一个想法。如果这不能解决问题，那么在这里发布你的一些CSS，以便我们看看它。

什么会导致自适应网站默认为移动设备？

2 个答案: