Question

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

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

我已尝试搜索有关如何在Rails和HTML中检查此信息的搜索。我发现的所有内容都要求使用CSS3媒体查询完成。

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

基本上我正在寻找类似这样或类似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小部件，或者可能存在帮助，您可以使用百分比而不是像素。

任何帮助都将不胜感激。

Answer 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

你可以试试这个推特小部件：http://tweet.seaofclouds.com/我被认为可以使用媒体查询。

Answer 2

可以查看JS Breakpoint libs，如http://xoxco.com/projects/code/breakpoints/

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

2 个答案: