
jQuery MobileでETサイトをスマートフォン対応させてみた
割とこれまでってガラケータイプのスマートフォン対応をしてきたのですが、ちょっと気になっていたので、ETのサイトはjQuery Mobileでスマートフォン対応させることにしました。
Experience Transporters : Branding, Direction, Planning & Design.
基本的にはドキュメントが大変充実しているので、それ見ながら組んでいけばいいだけなんですけど、きちんとマークアップすれば、そんなにWordPressをjQuery Mobileでスマートフォン対応させるのも難しくないなあという感じがしました。一点引っかかったのが、Ajaxによるページ遷移で、多分、WordPressだと絶対パスでリンク貼るからかなあと思いますが、リンク部分のAjax切ってます。
<a href="hoge.html" data-ajax="false">hoge</a>
こんな感じ。昨日移動中にドキュメントはざーっと目を通しておいたので、朝起き抜けに3時間くらい頑張ったらできました。年の瀬にまた一つ習得した。えかったえかった。
追記:
Facebookで中に入った時のリンクが壊れてるとご指摘いただきまして。そうですよね、上の方法だと記事内リンクの面倒まで見れないので、全体でAjaxオフにする設定が必要。
jquery mobile で ajax をオフにする記述が a4.1 の次から変わったみたい。 – モーリスのシステム開発日記
$(document).bind("mobileinit", function(){ $.mobile.ajaxEnabled = false; });
をjQueryとjQuery Mobileの間に入れてあげて解決。

加藤 康祐 / 企画・設計
プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。
是非、フォローしてください!
Twitter / Instagram
売り上げランキング: 14,705
100円
フリーランスとして働き始めるってどういうことだったのか?フリーランスとして働くってどういうことなのか?フリーランスが目指すことってなんなのか?5年間の自分の経験から書きました。(2010年執筆)