0

ウェブサイトにRails3.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ウィジェットのヘルプが存在する可能性があります。

どんな助けでもいただければ幸いです。

4

2 に答える 2

1

私の知る限り、メディアクエリは、画面サイズ定義のピクセルでのみ機能します。

Javascriptを使用して画面サイズを確認することもできますが、メディアクエリを使用しないのはなぜですか。使えないとおっしゃっていましたが、これが唯一の選択肢のようです。

Webページのサイズを取得するJavaScriptの方法があります（ソース画面、現在のWebページ、およびブラウザウィンドウのサイズを取得します）

 $(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 に答える