如何在不使用 CSS3 的情况下检查显示器分辨率答案

【问题标题】：How To Check Monitor Resolution Without Using CSS3如何在不使用 CSS3 的情况下检查显示器分辨率
【发布时间】：2012-11-15 06:49:12
【问题描述】：

我刚刚为我们的网站部署了一个 Rails 3.2.9 应用程序。在主页上，我有旧的 Twitter 小部件，您可以在其中修改比新功能看起来更多的功能。我开发了一个网站，它使用 CSS3 中的媒体查询为桌面和移动设备提供响应式设计。

根据我的经验，问题是旧的小部件不允许输入宽度和高度的百分比。当然，这些小部件的帮助不再可用。新的 Twitter 小部件不允许您修改宽度，只能修改高度。我希望能够根据屏幕分辨率为 Twitter 小部件设置不同的宽度。我认为这可能的唯一方法是，如果我能以某种方式检查我的 html/erb 代码中的监视器大小。

我已经进行了搜索，试图找到有关如何在 Rails 和 HTML 中检查这一点的信息。我发现所有这些都需要使用 CSS3 媒体查询来完成。

我的问题：有没有办法在 HTML5 或 Rails 3 中检查 CSS 媒体查询中使用的媒体参数？

基本上我正在寻找类似的东西或一些 HTML5 等价物。

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<% if some media query parameters for smartphones %>
  <script>Twitter widget</script>
<% elsif some media query parameters for tablets %>
  <script>Twitter widget</script>
<% else %>
  <script>Twitter widget</script>
<% end %>

对于旧的 Twitter 小部件，您可以使用百分比而不是像素来提供帮助。

任何帮助将不胜感激。

【问题讨论】：

标签： ruby-on-rails twitter twitter-bootstrap media-queries

【解决方案1】：

据我所知，媒体查询仅适用于屏幕尺寸定义的像素。

您可以使用 Javascript 来检查屏幕大小，但又为什么不使用媒体查询。我知道你说过你不能使用它们，但这似乎是唯一的选择。

有一种获取网页大小的javascript方式（来源Get the size of the screen, current web page and browser window）

 $(window).height();   // returns height of browser viewport
 $(document).height(); // returns height of HTML document
 $(window).width();   // returns width of browser viewport
 $(document).width(); // returns width of HTML document

你可以试试这个 twitter 小部件：http://tweet.seaofclouds.com/ 我相信它可以与媒体查询一起使用。

【讨论】：

我担心我唯一的选择是媒体查询。我尝试使用 CSS 覆盖旧 Twitter 小部件的硬编码宽度和高度，但它不起作用。我发现我们其中一个网站的默认设置可以很好地使用新的 Twitter 小部件。我一定会查看推荐的 twitter 小部件。我确信其他 3rd 方解决方案可用。注意：下学期我将参加在线 Javascript 课程。我认为有 Javascript 解决方案，但不想尝试 :) 我将保存这篇文章并在课后使用这些信息。谢谢！！

【解决方案2】：

可以看看像http://xoxco.com/projects/code/breakpoints/这样的JS断点库

【讨论】：

当我最初写这个问题时，我只有一个 Rails 应用程序。我现在有九个。其中四个已升级到 Rails 4 Ruby 2。我最终更改了所有 Rails 应用程序以使用颜色方案与 Twitter 中提供的配色方案相匹配的新小部件。如果我需要检查视图中的宽度，我已保存此链接以供将来参考。非常感谢。