スマホページコーディングについて

まだまだ仕様をつかみきれていないところもあったりするのですが、スマホページのコーディングについて、一度整理してみました。
今回は、まず設定まわりについてまとめています。

ページ作成の基本

スマホページ作成にあたって、まず横幅を何pxで作ればいいのかという問題があります。

今のところ解像度は、縦向きは320px～640px、横向きは480px～960pxあたりが一般的 ではないでしょうか。

しかし、機種によって本当にさまざまなので正直悩ましいところですね…

この中から標準なサイズを決めるとすると、320px(横)/480px（縦）考えるのが良いかと思います。

※iPhone4Sは解像度が640px/960pxですが、内部解像度で320px/480pxと解釈されるので（iPhone5も横幅は一緒ですね）

しかし、表示サイズを幅320pxが標準としたとしても、解像度的にきれいに表示されるサイズとなると、ちょっと違ってきます。

そうです、上にも書いたとおりiPhone4Sは解像度が640pxなのです。

そのため、画像がきれいに表示されるサイズを考えたら、幅640pxでデザインを作成した方がいい ということになるのです。

スマホ独自の仕様の設定

・ホーム画面に表示されるアイコンの指定

ブックマークをホーム画面に追加したときに表示されるアイコンです。

通常はそのサイトのキャプチャかファビコンが使用されますが、オリジナルのアイコン画像を用意して設定することが可能です。

サイズは端末ごとに異なります。それぞれのサイズをつくり設定することができますが、自動的に縮小表示してくれるので、144x144px以上の画像を1つ設定すれば良い かと思います。

また、注意点として画像はpngでつくってください。

1
<link rel="apple-touch-icon" href="icon.png" />

・電話番号、メールアドレスのリンクの自動検出設定

電話番号やメールアドレスを検出してリンクをつける機能です。

デフォルトは「on」になっていますが、意図しない部分にリンクがついてしまうこともある ので「off」にしておいた方が無難かもしれません。

1
2
3
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="email=no" />

・viewport

viewportとは、スマートフォンでの可視領域やズームなどの設定をするmeta要素です。

次の表のプロパティが設定できます。

viewport

NamePropatyCommentary
width200～10,000px横幅をpxで指定する。特別な値として、device-widthの指定が可能。
height200～10,000px高さをpxで指定する。特別な値として、device-heightの指定が可能。
initial-scaleminimum-scale～maximum-scaleで指定した値の間ページが最初に読み込まれるときの拡大率。デフォルトではページを画面に合わせるようになっています。
minimum-scale0～10倍率の最小値。数値で指定。デフォルトは0.25
maximum-scale0～10倍率の最大値。数値で指定。デフォルトは1.6
user-scalableyes / no拡大縮小の可否。デフォルトはyes(可)となっている。

設定ですが、どれがいいかと決めきれないところであり、サイトの仕様に合わせてくださいというのが正直なところです…。

そんな中でも、とりあえず下記の値だけは忘れず設定したほうがいいです。

1
<meta name="viewport" content="width=device-width">

ページの振り分け方法について

せっかくスマホ専用ページを作っても、PC用のページにアクセスしてしまったら意味がないですね。
誘導枠を分けたり、専用のURLを打ち込んでもらえればアクセス可能ですが、それではちょっと手間です。

そのため、ユーザーエージェントを判別して振り分ける方法を紹介します。

ここでは下記3つの方法を紹介しますので、サイトの環境に合わせて使い分けていただければと思います。

・PHPで振り分ける

1
2
3
4
5
6
7
<?php
$ua=$_SERVER[&#039;HTTP_USER_AGENT&#039;];
if((strpos($ua,&rsquo;iPhone&rsquo;)!==false)||(strpos($ua,&rsquo;iPod&rsquo;)!==false)||(strpos($ua,&rsquo;Android&rsquo;)!==false)) {
    header(&ldquo;Location:/sp/index.php&rdquo;);
    exit();
}
?>

・JavaScriptで振り分ける

1
2
3
if ((navigator.userAgent.indexOf('iPhone') > 0 &#038;&#038; navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    location.href = '/sp/';
}

・.htaccessで振り分ける

1
2
3
4
5
6
7
8
9
10
11
RewriteEngine On
# Set enviroment value by user-agent
SetEnvIf User-Agent "iPhone" UA=sp
SetEnvIf User-Agent "iPod" UA=sp
SetEnvIf User-Agent "Android" UA=sp
# Redirect if smart phone
RewriteCond %{REQUEST_URI} !^/sp.*
RewriteCond %{ENV:UA} ^sp$
RewriteRule ^(.*)$ /sp/ [R,L]

結論というかまとめ

・とりあえず今は横幅640pxくらいでデザインつくっておけばいいんじゃない？

・アイコン画像は144x144px以上 のものを1つ設定する

・スマホのみのコンテンツでないときはUA判別で振り分ける

・とくに決まっていなければ、viewportは下記にする

1
<meta name="viewport" content="width=device-width">