【问题标题】: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,以便我们查看。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-07-15
      • 2016-11-02
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多