私のアプリには 2 つの異なるユーザー インターフェイスがあります。1 つは PC 上の標準ブラウザーによって呼び出されたときに呼び出され、もう 1 つはモバイル デバイスによって呼び出されたときに呼び出されます。私の資産ディレクトリには
assets
javascripts
application.js
mobile
application.js
stylesheets
application.css
mobile
application.css
mobileapp.css
....
....
views
layouts
application.html.erb
application.mobile.erb
マニフェスト ファイルは次のとおりです。
javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_directory .
javascripts/mobile/application.js
//= require jquery.mobile
//= require_directory .
スタイルシート/application.css
*= require_self
*= require_directory .
*/
スタイルシート/モバイル/application.css
*= require jquery.mobile
*= require_directory .
*/
開発中はすべて問題なく動作しますが、モバイル デバイスでアプリを呼び出すと、プロダクション モード (Apache/Passenger) に移行するとすぐに、モバイル アプリケーションのレイアウトが使用されていることがわかりますが、スタイルは mobile/mobileapp に含まれています。 css は使用しません。
モバイル デバイスでデバッグする方法がありません (firebug または Google chrome 開発者ツールはありません)。乗客がモバイル デバイスに提供しているものを知る方法はありますか? 私はいつでもwiresharkを使用してネットワークパケットを盗聴できることを知っていますが、より高いレベルのツールが存在する場合は感謝します..
編集
多分今、私は問題の原因を突き止めました。jquery mobile は、DOM がロードされた直後にその「魔法」を実行することを知っています。アプリがパッセンジャーによって (アセットのプリコンパイル後に) モバイル デバイスに提供されると、正しいページと正しいアプリケーション レイアウトが提供されますが、Jquery モバイルは DOM の読み込み時にすべての要素を初期化しないため、私のページは「ハイブリッド」のままになります。州。
この種の問題があり、それを解決した人はいますか？