sparrow.jsの一押しは、TIPSです。classを追加するだけで反映されちゃうからとっても便利です。そんな便利なTIPSを本家のサイトから抜粋してご紹介します。設置したら下記のTIPSを試してみると面白いですよ。
導入と設定に関する記事は「sparrow.jsの導入と設定」が参考になればと思います。
■モバイル用に設定したスタイルをスマートフォンで表示したくない場合
▼class=”sp_del” を使用します。
<div style="font-size: xx-small;" class=”sp_del” > スマートフォンではここは消えてなくなります。モバイルでは表示されます。 </div>
■スマートフォンだけ文字サイズを変更したい場合
▼下記のコードを使用します。core.jsに記述されています。
<span class="sp_style largeFont" style="font-size: xx-small;"> スマートフォンでは大きい文字に変わります </span>
sp_styleはstyle無効のclassです。largeFont（記述通りに反映されます）が、どこで設定されているclassなのかよくわからないですね。sp_del同様にcore.jsに記述されています。
sp_config.js に記述されている下記の○%部分を変更することで、モバイルで指定したフォントサイズをスマートフォンように変更することができます。コード内でしっかりと、xx-small等の指定がされているモバイルサイトであれば、ここを変更するだけで、文字の見え方は格段に良くなります。
FONT_MAPPING["xx-small"] = "○％"; FONT_MAPPING["x-small"] = "○％"; FONT_MAPPING["small"] = "○％"; FONT_MAPPING["medium"] = "○％"; FONT_MAPPING["large"] = "○％"; FONT_MAPPING["x-large"] = "○％"; FONT_MAPPING["xx-large"] = "○％";
■テキストリンクをナビゲーション表示：参考
▼スマートフォンでは、とにかくクリックしにくいので、tableタグを使用していないのであれば、設定したほうがユーザーも使いやすくなりますね。spLinkの設定はsparrow.cssに記述してあります。
<div class="spLink"><a>リスト1</a> <a>リスト2</a> <a>リスト3</a></div>
■テキストリンクをナビゲーション表示 – その2
▼a要素とa要素の間にテキストノードや別の要素がある場合は、class属性に「sp_list」という名前のセレクタを追加します。こちらも、largeFont同様に反映されますが、記述元がよくわからない。
<div class="sp_list spLink"><a>リスト1</a> | <a>リスト2</a> <a>リスト3</a> | <a>リスト4</a></div>
モバイルサイトに影響しないようにカスタムする為にはclassだけ追加するのが理想的ですね。
参考：sparrow.js Facebook
関連記事：
