手軽さ・自由度の高さを紹介してきました。Mobileは、実は大きな問題を抱えています。Mobileで作成されたサイトをPCで表示するとやや間抜けなデザインとなってしまいます。iPhoneではこのように表示されるページもPCで表示するとこの通り。Firefox4でレイアウトが崩れます。修正までしばらくお時間いただけますと幸いです。PCをHTMLに適用すると、先ほどのような画面がこのようなになります。背景やiPhoneの表示位置はカスタマイズ可能なので、ここからあなた好みの画面を作っていってください。iPhone向け英単語学習サイト『eWords』ではこんな感じにしてみました。Lab』さんの以下のエントリを参考に、igosso画像検索というサービスから探してきました。〜ブログで使える無料画像サービスまとめ〜いつもお世話になってます。ありがとうございます。IEでの動作の検証はしていません。下記2ファイルで構成されています。jquery.mobile.forpc-0.1.0.jsbackground-iphone.pngこれらのファイルはGitHubで公開しています。GitHUBライセンスはMITライセンスとしていますので、私のコピーライト表示を含んだヘッダを維持したままであれば再配布も変更も自由にしていただいてかまいません。インポートしてください。Mobileの順で行ってください。background-iphone.pngを同一ディレクトリに設置した場合は、これで導入完了です。カスタマイズ』をご覧ください。カスタマイズjquery.mobile.forpc-0.1.0.jsとbackground-iphone.pngを異なるディレクトリに配置した場合は12行目のPATHの値を書き換えてください。iPhoneを任意の場所に表示した場合は、16行目のPOSITION_LEFTの値をWindowの左端からのピクセル数(Integer型)に置き換えてください。onload背景は『background-iphone』クラスにstyleを追加することで変更できます。私は下記のようなstyleを追加しています。overflow:hidden;}CSSを適用させるHTMLでは、下記のようにインポートすることで、スマートフォンからアクセスした場合には適用されないようにすることが可能です。/>問題点・課題data-position="fixed"を強制的にdata-position="inline"に書き換えているため、ヘッダ・フッタが中途半端な位置に配置される。ページの高さが表示サイズを超える場合にスライドバーを表示させることで回避しているが美しくない。ページ下部に無駄なスペースができる・・これはなんとかせねばですね。Mobileで提供されている全要素について動作を検証できているわけではありません。レイアウト崩れ等、発生しましたら@amazedkoumeiまでご一報いただけると幸いです。GitHUBで公開しています。動作は不安定ですが、ご利用いただけると嬉しいです。GitHUBまた、エントリ中で紹介した『eWords』にもぜひアクセスしてみてください。単語ページで左右にスワイプすることで単語を切り替えられます。ご指摘いただき、外部HTMLに遷移した際にスタイルが適用されない不具合を修正しました。ご指摘ありがとうございました。