少しのコードで実装可能な15のスマートフォンサイト用小技集
スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！
↑私が10年以上利用している会計ソフト！
スマートフォンサイト用小技集 目次
いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！
- 横幅をデバイスの幅にあわせる
- 文字サイズの自動調整をオフ
- リストのクリック（タップ）範囲を広げる
- 画面の幅にあわせてCSSを変える
- リンクテキストのあるDiv全体をクリック（タップ）できるようにする
- 画像のサイズを自動調整
- 背景画像の解像度を倍にする
- ユーザーエージェントでページを切り替える
- アドレスバーを隠す
- ホーム画面のブックマークアイコンを設定
- リンクテキストをタップした時の色を変更
- 入力フィールドで数字キーを表示
- 電話番号のリンクを消す
- ページを全画面表示する
- ステータスバーの色を変更する
1. 横幅をデバイスの幅にあわせる
スマートフォンは幅が狭いので、PC・Mac版の幅にあわせていると文字が小さすぎて非常に読みづらくなります。そこで、下記のメタタグを <head>〜</head> 内に記述して横幅をあわせましょう。ViewportについてはiPhone生活さんの記事でかーなーり詳しく説明されているので、あわせて読んでみてください！
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. 文字サイズの自動調整をオフ
スマートフォンではデバイスにあわせて文字のサイズを自動的に調整する機能がついています。CSSで装飾する際にこの調整が不要な場合は値を none にしてオフ100％に設定しましょう。デフォルトでは auto です。none で完全オフにもできます。
追記：-webkit-text-size-adjust: none を絶対に設定してはいけない理由 を見て変更。スマートフォンのみオフにするなど、ユーザーエージェントで判別させるのがベストかも？
html {-webkit-text-size-adjust: 100%}
3. リストのクリック（タップ）範囲を広げる
人の指って意外と太いんですよね。Web上では大きく見えるナビゲーションメニューも、スマートフォンで見るとタップしにくいものもたくさんあります。そこで、少しでもクリック（タップ）範囲を広げるため、メニューに使っている <a> 要素をCSSでブロック要素にしましょう。
li a{ display: block; }
See the Pen Clickable Area by Mana (@manabox) on CodePen.
4. 画面の幅にあわせてCSSを変える
iPhoneの横幅は320px、横向きにした時の幅は480px568pxです。CSSのMedia Queriesを使って幅を指定し、CSSを変更することができます。幅が長い方を上に記述しないとスタイルが上書きされちゃうので注意。サンプルでは通常時（320px）に背景色をピンク、横向き（480px568px）の時に青にしています。
@media screen and (max-width: 568px){ /* 画面が568pxの場合 */
body{ background: #80D0FF }
}
@media screen and (max-width: 320px){ /* 画面が320pxの場合 */
body{ background: #FFDBF3 }
}
See the Pen Media Queries by Mana (@manabox) on CodePen.
5. リンクテキストのあるDiv全体をクリック（タップ）できるようにする
テキストリンクは本当にタップしにくいので、リンクがある時はDiv全体をリンク範囲にしてしまいましょう。ここではjQueryを使った方法を紹介します。jQueryファイルを読み込むことを忘れずに！「続きを読む」リンクなどがある場合に重宝しそうです。
$(function(){
$("div").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
6. 画像のサイズを自動調整
画像がデバイスの幅より大きい場合、画面からはみ出して横スクロールバーが表示されてしまいます。それを防ぎ、デバイスの幅にあわせて画像を表示するよう、下記CSSを追加しておくといいでしょう。
img {
max-width: 100%;
height: auto;
}
7. 背景画像の解像度を倍にする
iPhone4からRetinaディスプレイが搭載され、解像度が従来の倍になりました。そのため通常サイズでは画像が劣化して見えてしまいます。きれいに表示させるには、表示させたい画像の倍のサイズを用意する必要があります。HTMLで画像を表示する場合は img要素の width と height を調整してサイズ指定すればいいのですが、背景画像の場合はどうすればいいのでしょう？答えは -webkit-background-size 。横幅・縦幅の順にサイズを指定するとうまく縮小されて表示できます。サンプルでは600x300pxの画像をCSSで300x150pxに指定して表示しています。
div{ -webkit-background-size: 300px 150px; } /* 横px 縦px */
See the Pen Background size by Mana (@manabox) on CodePen.
8. ユーザーエージェントでページを切り替える
PC・Macとスマートフォンで違うページを指定したい場合は、ユーザーエージェントを判別して切り替えることができます。スマートフォン用サイトでよく使うユーザーエージェントは「iPhone」の他、「iPod」「iPad」「Android」ですかね。以下の例ではiPhoneで閲覧した場合、「http://mobile.example.com」にジャンプするように設定しています。読み込むCSSをデバイスによって変えたい場合も使えますね。
JavaScript
var ua = navigator.userAgent.toLowerCase();
var isiPhone = ua.indexOf("iphone") > -1;
if(isiPhone) {
window.location = 'http://mobile.example.com';
}
PHP
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if((strpos($ua,'iPhone')==true)||(strpos($ua,'iPod')==true)||(strpos($ua,'Android')==true)) {
header('Location: http://mobile.example.com');
exit();
}
?>
.htaccess
RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
RewriteRule ^(.*)$ http://mobile.example.com [R=301]
9. アドレスバーを隠す
JavaScriptでページを読み込んだら自動的にアドレスバーを引っ込めます。下記コードの「100」はページを読み込んでからアドレスバーを引っ込めるまでの時間です。お好みで調整してください。
window.onload = function(){
setTimeout("scrollTo(0,1)", 100);
}
10. ホーム画面のブックマークアイコンを設定
Webサイトをホーム画面にブックマークした時に表示されるアイコンを設定できます。 <head>〜</head> 内に以下のコードを記述。iPhoneでは自動的に光沢が追加されますが、光沢が不要な時は rel="apple-touch-icon-precomposed" とすればOK。画像形式はPNG、サイズはiPhoneで114x114px（iPhone4以前は57×57px）、iPadでは72x72pxです。
<link rel="apple-touch-icon" href="favicon_big.png">
11. リンクテキストをタップした時の色を変更
リンクテキストをタップすると、デフォルトでは文字列にグレーの背景色が表示されますが、-webkit-tap-highlight-color を指定することで好みの色に変更することができます。
a{-webkit-tap-highlight-color: #FF0}
See the Pen Mobile highlight colour by Mana (@manabox) on CodePen.
12. 入力フィールドで数字キーを表示
以前Twitterでも紹介した方法です。
スマホサイト制作：スマホの入力フィールドで数字キーを開くなら、type="number"やtype="tel"より<input type="text" pattern="[0-9]*">がいいよというお話（英語） http://t.co/UEjLBWcf
— Webクリエイター ボックス (@webcreatorbox) February 15, 2012
入力フィールドの type属性を number で指定すると、数字だけでなく英字キーも同時に表示されます。かといって数字のみが表示される tel では用途が変わってきちゃいます。下記のコードだと数字キーのみが表示され、type属性も text なのでうまく使えると思います。
<input type="text" pattern="[0-9]*">
See the Pen Mobile input type by Mana (@manabox) on CodePen.
13. 電話番号のリンクを消す
文章内などで電話番号が記述されていた場合、iPhoneでは自動的にリンクテキストに変更します。リンクに設定したくない場合は <head>〜</head> 内に下記メタタグを記述し、 telephone の値を no にします。
<meta name="format-detection" content="telephone=no">
14. ページを全画面表示する
Safariなどのブラウザーでサイトを開くと表示される、アドレスバーとツールバーを非表示にすることができます。ただし、ホーム画面にブックマークした場合のみ有効な技です。アプリのような表示方法が可能ですね。<head>〜</head> 内に下記メタタグを記述し、content の値を yes にします。
<meta name="apple-mobile-web-app-capable" content="yes">
15. ステータスバーの色を変更する
こちらもホーム画面にブックマークした場合のみ有効な技です。デフォルトではグレーで表示されているステータスバーの色（default）を、黒（black）や半透明の黒（black-translucent）に変更できます。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
役にたちそうな小技が見つかりましたか？もっと手軽にできる方法や、おすすめの小技があればコメントください！ ;)
Source:
Thanks. The tips are really helpful. Appreciated.