在不支持CSS媒体查询的浏览器中使用Javascript

Using Javascript for browsers that don't support CSS media queries

本文关键字：Javascript 浏览器 不支持 CSS 媒体 查询      更新时间：2023-09-26

我正在做一个项目，我一直在研究通过使用媒体查询来实现响应式布局的各种方法。我一直在考虑的一件事是浏览器不支持它们，特别是Internet Explorer 5.5 - 8版本(源代码)，并使用Javascript作为后备方法，如css3-mediaqueries.js或response .js。

我不是想知道两者中哪一个最好，而是想知道使用它们有多大的必要性。

我现在看到的是，如果你使用的是手持设备(手机或平板电脑)，你很可能使用支持媒体查询的浏览器，因为我可以想象，大多数这些设备的浏览器都是现代的，并且都是考虑到媒体查询而构建的。因此，如果用户在旧的IE浏览器中浏览网站，那么很可能是在台式机上(理论上)有台式机大小的显示器。这意味着他们无论如何都会看到css文件的基本网格默认值。这让我觉得不可能有巨大的需求去尝试和支持一个人，不管出于什么原因，有一个旧版本的手持屏幕的IE。

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

我只是想知道是否有人可以给它一些光，并帮助我更好地理解为什么应该使用它们，我并没有关闭使用它们的想法，我只是没有看到需要，但这可能是因为我错过了一些东西

就我个人而言，我从未尝试在不支持它的浏览器中复制mediaquery。在我不得不在一个有媒体查询的网站上支持非css3浏览器的情况下，我总是通过css条件注释固定非css3版本的宽度，因为正如你所说，手机或平板电脑可能有支持。

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

希望对你有帮助。

我为财富100强的客户建立了很多网站。在大多数情况下，我们不使用这些js插件。这取决于以下几点:

  1. 你是先构建移动端还是桌面端css ?如果移动优先，IE8及以下版本将看到移动视图(这不是最佳的)。如果你先构建桌面，他们会看到桌面视图。
  2. 你能支持多少时髦?大多数客户希望它在ie8中工作，但仅此而已。大多数人已经完全放弃了ie7及以下版本。一般的网站在ie8中并不完美。只要最终用户能够获得内容，这通常就是ie8的全部问题。有些客户可能完全不同意。
  3. 您是否有令人信服的理由使用或避免使用它?这通常是最重要的一点。在ie8中打开网站，如果没有媒体查询完全破坏了它，试试response .js，看看它是什么样子的。

包含它非常简单，如果你使用条件语句，它甚至不会尝试在较新的浏览器上加载。

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

基本上，只是在每个网站的基础上看它。如果有帮助，就使用它。如果没有，忽略它

相关文章：