将Javascript用于不支持CSS媒体查询的浏览器

时间:2013-03-04 05:26:23

标签: javascript css3 responsive-design media-queries respond.js

我正在开展一个项目,我一直在研究使用媒体查询的各种响应式布局方法。我一直在考虑的许多事情之一是不支持它们的浏览器,特别是Internet Explorer版本5.5 - 8(source)并使用Javascript作为后备方法,其中包含{{3}等选项}或css3-mediaqueries.js

我不想知道哪两个最好用,但质疑甚至使用它们有多大必要性。

我现在看到的方式是,如果你使用手持设备(手机或平板电脑),你最有可能使用支持媒体查询的浏览器,因为我想,大多数这些设备浏览器是现代的,并且在构建时考虑了媒体查询。因此,如果用户在旧的IE浏览器中查看该网站,则很可能将其放在具有(理论上)桌面大小的监视器的台式计算机上。这意味着他们无论如何都会看到css文件的基本网格默认值。这让我觉得不可能有很大的需要尝试和支持某个人,无论出于何种原因,他有一个带有手持大小屏幕的旧版IE。

但与此同时,必须要有这些Javascript文件,否则很多网站都不会使用它们。我可以看到对它们的需求的唯一原因是对于不读取媒体查询的浏览器,它们在尝试读取媒体查询时会引起问题并在布局中抛出错误或不一致。

我只是想知道是否有人可以对它有所了解并帮助我更好地理解为什么要使用它们,我并没有因为使用它们的想法而关闭我只是没有看到需要,但可能是因为我遗失了一些东西。

2 个答案:

答案 0 :(得分:0)

就个人而言,我从未尝试在不支持它的浏览器中复制媒体查询。如果我必须在具有媒体查询的网站上支持非css3浏览器,我总是通过css条件注释修复非css3版本的宽度,因为正如你所说,手机或平板电脑可能会有支持。

然而,媒体查询不仅有助于创建适合移动设备的设计,还有助于流畅的设计,可能是1200px甚至1600px宽的显示器,但仍然需要在1024px屏幕上工作。在这个例子中,旧浏览器更有可能在较小的屏幕上运行,因此媒体查询将非常有用。在这个例子中,其中一个库很有用。

希望有所帮助。

答案 1 :(得分:0)

我为财富100强客户建立了很多网站。在大多数情况下,我们不使用这些js插件。这实际上取决于一些事情:

  1. 您是先制作css手机还是先制作桌面?如果先移动,IE8及以下将会看到移动视图(这不是最佳的)。如果您先构建桌面,他们会看到桌面视图。
  2. 你能支持多少funkiness?大多数客户希望它在ie8中工作,但这就是它。大多数人都完全放弃了ie7及以下。 ie8的平均网站并不完美。只要最终用户可以获得内容,这通常与ie8有关。有些客户可能完全不同意。
  3. 您是否有令人信服的理由使用它或避免它?这通常是最重要的一个。在ie8中提取网站,如果没有媒体查询完全破坏它,请使用respond.js尝试并查看它的外观。
  4. 包含它非常简单,如果使用条件语句,它甚至不会尝试加载到新的浏览器上。

    <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <!-- <![endif] -->
    

    基本上,只需按站点查看即可。如果有帮助,请使用它。如果没有,请忽略它。