2013年04月18日

スマートフォンサイト作成の注意点

 スマートフォンとPC、テンプレートを共有する場合で使用できないHTMLやスタイルシート、作成上の注意点についてお勉強してみよう。

 

スマートフォンサイト作成時の注意点

1、インラインフレーム

 インラインフレームそのものは使えるが、スクロールバーが表示されなかったりと色々と問題が生じる。
 スクロールそのものは、2本指でフリックすればスクロールできる。
 HTMLでの対策はあるにはあるけど、面倒なのでなるべく使わないほうがいいかも。

 

2、一部の機種で太字表現ができない。

 Androidの標準フォントであるDroid Sans Japaneseにはボールド体が存在しない。
 スタイルシートの〔FONT-WEIGHT: bold〕は使用できない。

 

3、フォントサイズは12px以上で作成

 iPhoneには特定のfont-size(11px、10px、9px)のときだけマルチバイトの幅計算がおかしくなるバグが存在する。

 

4、極力画像・Flashを使わない

 Flashが表示できないスマートフォンもある。

 

5、等幅フォントで作成する

 ヒラギノ角ゴ W3・なければ、MS ゴシック・MS 明朝などの等幅フォントで作る。

 

6、リンクの領域は44px以上で

 スマートフォンは指で操作するタッチデバイスという特徴上、小さいリンクなどは非常に押しにくい。

 

7、横幅は320pxで見やすい、リキッドサイズでデザインするのが望ましい

 640pxでデザインする場合は余白やフォントサイズなどがすべて2で割り切れるようにデザインしないといけないらしい。
 320PXくらいでも見やすい、デザイン。
 横にしたときでも崩れない、リキッドサイズでデザインする。 
 また、viewportでページを表示する際の画面表示に関する定義を行わないと、320PXで作ったサイトでもiPhone では980pxと判断されて、縮小表示される。

 

8、オンザマウスで説明がでるようなデザインは使わない

 マウスを乗せると、説明がでるようなデザインはスマートフォンでは使えない。
 使いたいなら、タップしたときにもマウスを乗せたときと同様な説明がでるようにする。

 

 難問は、viewportというmetaタグ。

 勉強不足のせいか、ぴんとこない・・・。




2013年04月07日

スマートフォン表示から自動的にPC表示飛ばした時の『スマートフォン専用ページを表示』

 シーサーブログのスマートフォン専用サイトは、要らない広告がいっぱいついてくる。

 シーサーブログのスマートフォン専用サイトから自動的にPCサイトに飛ばすこともできる。

 できるのだが、どういうわけか、ヘッダー部分に『スマートフォン専用ページを表示』というリンクが表示される。

 この、『スマートフォン専用ページを表示』、PCテンプレートのHTMLの部分を見ても、どこにあるのかわからない。

 共通ヘッダーを使用しない設定にしても、表示される。

 PCでソースを見ても、スマートフォン専用ページを表示の記載があることから、もともとシーサーブログ側でユーザーがいじれないように制御しているものと思われる。

 

 といっても、以前説明した、

<SCRIPT LANGUAGE="JavaScript">
<!--
function autoLink()
{
document.cookie = 'force_pc=1; max-age=15768000; path=/';
location.href=location.pathname;
}
setTimeout("autoLink()",1000);
// -->
</SCRIPT>

 をスマートフォン用のコンテンツに挿入しておくと、『スマートフォン専用ページを表示』のリンクをクリックしても、自動的にPC表示に戻ってくる。

 

 ということで、スマートフォン用のテンプレートとPCテンプレートの両方に、注意書きをおいたほうがいいかも。


最近のコメント
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。