iOS safari:まとめ

スマートフォン向けの勉強をしてきましたが、ちょっと記事がごちゃごちゃしているので
ここで簡単にまとめておこうと思います。
 
 

・html5とcss3を利用する

ほとんどのスマートフォンがhtml5に対応しており、css3への対応もかなり進んでいる。
css3を利用すれば、画面の広さが異なる各機種に柔軟に対応できるし、PCよりも通信速度が
遅い部分をカバーできるので利用すべき。
スマートフォン向けのリセットcssもブラッシュアップしていこう。
 
 
 

・viewportの設定

webデザイニング2011.12月号のsmartPhone.labでは3パターンのviewportを紹介して
いますが、やはり向きによって拡大縮小をされないリキッドレイアウトのパターンが一番良い
と思います。ということで、以前の記事通り以下の様な設定で以降と思います。

<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1.0, user-scalable=no">

上記の設定で行く場合はフォントサイズも縦横で変化しないようにreset.cssに以下の設定を
いれておくようにします。

 -webkit-text-size-adjust: 100%;

 
 
 

・ホームアイコン

webアプリ以外では利用される機会はほとんど無いかもしれないが、企業サイトとしては準備して
おくべきです。Apple製品ではアイコンサイズがある程度決まっていますが、Android系は機種ごと
に異なり、しかもsizes設定に現状では対応していません。ですので以下の様に設定しておこうと
思います。

ホームアイコン
光沢処理のデザインを入れない114×114のアイコンを作成し、以下の最小限の設定をする。
<link rel="apple-touch-icon" href="../images/home114.png" />

 
この処理によってiPhone系では他のApple系のアイコンと同じように光沢処理されAndroid系
では、他のアイコンと同じように通常表示されます。また、このコードでは各機種のアイコン
サイズにリサイズされるため、ストライプのようなデザインは避けるようにしましょう。
 
 
 

・自動電話リンクへの対処

スマートフォンでは電話番号でない数字の羅列に、自動的に電話リンクしてしまう場合があります。
これは企業サイトからの間違い電話を誘発する危険に栂なるため、必ず設定しておくべきでしょう。

<meta name="format-detection" content="telephone=no" />

 
 
 

・スマートフォンサイトへの誘導

最近のスマートフォンは画面サイズも大きく、PC用のサイトもそれほどストレス無く閲覧が
可能です。ですから強引にスマートフォン用サイトへ移動させるのではなく、ユーザーが
選択できるようにリンクボタンを表示するのが良いでしょう。その際、スマートフォンの
小さな画面でも目立つように、大きめのリンクボタンを表示するようにしましょう。また
逆にスマートフォン用サイトからPCサイトへ移動するボタンも設置するようにしましょう。
jQueryを利用すれば、簡単にスマートフォンでのアクセスの時だけリンクボタンを表示
できます。
 
 
 

・高解像度ディスプレイ向けの画像対策

表示する領域の4倍のサイズで画像を作成し、それを表示するようにします。
例:320×160のサイズで表示する場合は640×320の画像を用意し、それを320×160で表示する。
通信速度を考え、1ページ内にあまりたくさんの画像を配置しないようにレイアウトし、可能な
限りcss3でのデザインにする。
 
 
おしまい
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


+ 八 = 9


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>