スマートフォンサイトについて｜メモ

はじめに

当WebサイトはIE対策を全くしてないです。IEの方ごめんなさい。
IE対策は仕事でお腹いっぱいです(笑)

メモ

jQueryMobile関係のメモ

jQueryMobileGallery

jQueryMobile.com

jQueryMobile.com(日本語版)

Phonegap.com

iPhoneシミュレーター

iBBDemo2

●使用方法

iPad

Ctrl + 1

iPhone

Ctrl + 2

縦横切替

Ctrl + ←(or→)

jQuery Mobileデザイン入門

http://ascii.jp/elem/000/000/607/607366/

10分でわかる！ jQuery Mobileのキホン

http://ascii.jp/elem/000/000/665/665861/

サンプル

http://webdesign.iinaa.net/study/practice/smartphone_site/

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1">

<div data-role="page" id="index" data-theme="b">
  <div data-role="header">
    <h1>ページタイトル</h1>
  </div> 
  <div data-role="content">
    <p>コンテンツ内容が入ります</p>
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">Menu</li>
      <li><a href="#book8"><h3>ページリンク08</h3><p>ページ内容について</p></a></li>
      <li><a href="#book7"><h3>ページリンク07</h3><p>ページ内容について</p></a></li>
      <li><a href="#book6"><h3>ページリンク06</h3><p>ページ内容について</p></a></li>
      <li><a href="#book5"><h3>ページリンク05</h3><p>ページ内容について</p></a></li>
      <li><a href="#book4"><h3>ページリンク04</h3><p>ページ内容について</p></a></li>
      <li><a href="#book3"><h3>ページリンク03</h3><p>ページ内容について</p></a></li>
      <li><a href="#book2"><h3>ページリンク02</h3><p>ページ内容について</p></a></li>
      <li><a href="#book1"><h3>ページリンク01</h3><p>ページ内容について</p></a></li>
    </ul>
  </div>
  <div data-role="footer">
    <h4>フッター表記</h4>
  </div>
</div><!-- ▲page index end -->


<div data-role="page" id="page08" data-theme="b">
  <div data-role="header">…</div>
  <div data-role="content">…</div>
  <div data-role="footer">…</div>
</div><!-- ▲page page08 end -->

        :
        :

おまけ１｜Dreamweaver CS5.5 とスマートフォン

jQueryを活用したモバイル向けデザインの効率化(和訳付き)

※こちらのサイトで紹介されています。
http://all-web-blog.blogspot.com/2011/04/dreamweaver-cs55-adobetv.html

おまけ２｜スマホサイトでのposition:fixed;

ついでに調べてみました。
既知の事実ですが、スマートフォンではposition:fixed;が効きません。
これを効くようにする方法。
iscroll.jsを使うとできるそうですが、不都合があって全部おｋというわけではないようです。

サイブリッジさんのサイトで説明を行っておりますので、組み込む場合は参照してみてください。

ちなみに本家サイトのサンプルから頂いたjsソースだと、追加するコードを挿入する行が若干ズレています。（この例だと317行目でした。付近のソースで検索してください。）