什么会导致响应式网站默认使用移动设备？答案

【问题标题】：What would cause a responsive site to default to mobile?什么会导致响应式网站默认使用移动设备？
【发布时间】：2012-09-20 10:11:19
【问题描述】：

我有一个使用带断点的媒体查询的响应式网格系统的站点。在 IE8 上，即使屏幕尺寸设置为标准桌面尺寸（宽度大于 960 像素），我也将“移动版”视为默认视图。

是否存在会导致这种情况发生的已知问题（和修复）？

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

----编辑----

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

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

【问题讨论】：

标签： internet-explorer css responsive-design media-queries

【解决方案1】：

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

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

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

【讨论】：

有趣的是我的客户看到了这个问题，但我无法重新创建它。他们给我发了屏幕截图，所以我知道他们看到的是移动版本。很难修复我可以测试的东西。
@dcp3450 我很确定respond.js 会完成这项工作
我试图避免给网站增加更多的加载时间。我真的不需要 IE8 来响应。我只需要 IE8 来不加载响应式 css。
添加了“仅屏幕”并安装了 respond.js 。他们说他们仍然看到这个问题......
没关系，这实际上修复了它。显然他们并没有像我告诉他们的那样清除缓存。

【解决方案2】：

这取决于您是如何构建代码的（而且由于您没有发布任何内容，因此很难判断哪里出了问题；））。但一个可能的问题是您首先定义了您的移动布局，并且媒体查询 >960 在 IE8 中不会触发。像这样：

 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，以便我们查看。

【讨论】：