0

我刚刚为我们的网站部署了一个 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 小部件可能存在帮助，您可以在其中使用百分比而不是像素。

任何帮助，将不胜感激。

4

2 回答 2

1

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

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

有一种获取网页大小的javascript方式（来源获取屏幕、当前网页和浏览器窗口的大小）

 $(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/我相信它可以与媒体查询一起使用。

于 2012-11-28T00:53:51.357 回答
0

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

于 2013-09-24T09:04:45.543 回答