3

ThemeRollerツールを使用して、jquery モバイル用のスタイルシートを作成しました。ThemeRoller ページでは非常に見栄えがします。私のモバイルアプリでは...あまり良くありません。私のスタイルシートと jquery スタイルシートの間の定義に矛盾があるに違いないと思います。

Rails レイアウト ファイル:

<%= stylesheet_link_tag "jquery_mob_theme.min", "jquery.mobile-1.1.0.min", "stylin.mobile" %>

レールに慣れていない人のために、次のようにレンダリングされます。

<link href="/stylesheets/jquery_mob_theme.min.css?1338304118" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.mobile-1.1.0.min.css?1338312435" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stylin.mobile.css?1337894014" media="screen" rel="stylesheet" type="text/css" />

これに対処する唯一の方法は、何千行もの CSS を調べて競合を探すことですか? スタイルシートでそれを検出するcssデバッグツールはありますか? jquery ファイル名を scss に変更してから、それらを 1 つのスタイルシートにまとめることができます。1 ページのスタイルをチェックする Firebug と Web インスペクタに精通しています。それは役に立ちません... そうですか？

ありがとう。

4

3 に答える 3

1

スタイリンスタイルシートの順序は、何がオーバーライドされるかによって重要になります。スタイルシートが両方のjQueryスタイルシートの前にあることを確認してください。

于 2012-05-31T13:14:59.037 に答える
1

Firebug (Firefox の拡張機能) は、特定の要素に適用されているすべてのスタイルと、他のスタイルによってオーバーライドされているスタイルを表示できます。デスクトップ ブラウザからモバイル サイトを表示する必要がありますが、Firefox では、ユーザー エージェントをモバイル デバイス (iPod、Android など) のユーザー エージェントと一致するように変更することで、これを行うことができます。

サイトで Webkit を使用する予定がある場合、Firefox は Webkit の CSS スタイルをレンダリングしないため、最適な選択ではありません。別の方法として、Safari とその開発ツール (オプション メニューで有効にすることができます) を使用することもできます。

実際のモバイル デバイスからデバッグする必要がある場合、多くのオプションはありません。デバイスに Opera モバイルをインストールできる場合は、Dragonfly と呼ばれる適切なデバッガーが付属しています。

于 2012-05-29T20:25:26.843 に答える
1

残念ながら、すべての css は継承に基づいているため、競合を自動的に認識したり、オブジェクトが親のスタイルをオーバーライドしたかどうかを自動的に知る方法はありません。最善の策は、Rails にモバイル版のサイトをデスクトップ PC に表示させてから、Google chrome インスペクタを使用できるようにすることだと思います。特定のオブジェクトに適用されたすべてのスタイルが表示されます。スタイルシートの行番号付きの関連するスタイルのみが表示されるため、css をいじる必要はありません。スタイルシートを変更する前に、クロムで編集して、変更がどのように見えるかを確認することもできます.

于 2012-05-29T20:22:12.633 に答える