HTML5に書き換えてみた
７．ｽﾏﾎ対応ﾍﾟｰｼﾞへ
これまでパソコンだけを対象としてホームページを作って来ましたが、もはやスマホも対象にしなくてはならない流れになっています。
そこで、パソコン用のHTML文書を、スマホ用にも対応できる様に、書き換えます。
とは言うものの、いまだにガラケーしか持っていませんのでスマホでの画面や操作性を確認できません。
従って、Google Chromeの開発用ツールを使って確認する事にしました。書き換えたいページをGoogle Chromeで表示し、
「Google Chromeの設定」（画面右上）→「その他のツール」→「デペロッパーツール」
で画面右側に開発用画面が出て来るので、スマホマークをクリックします。
クリックすると画面は下の様にスマホ画面表示に変わります。
この画面のスマホ画像の上には、スマホの種類と画像表示倍率を変える事ができる様に、ボタンが付いています。
左側の「Responsive」のボタンをクリックするとスマホの種類一覧が出て来ますので希望のものをクリックします。倍率も同様です。
改めてパソコン画面を確認します。スマホ画面ではパソコン画面と同じものが表示されていますが、画面が小さいので見にくい事が判ります。
と言う事で、スマホ画面はパソコン画面と別デザインにしていきます。ただし、メンテナンスを考えてHTML文書は１つだけです。
head要素内でviewport指定
なぜ上の様な事が起こったのかと言うと、このページが、スマホで見るときもパソコン向けのページとして見なされているからです。（横幅980pxの扱いで表示する）
スマホでページを適切な大きさで表示させるには、スマホの横幅を画面幅に指定しておく必要があります。
その指定方法が、head要素内でmeta要素のviewport指定です。
記述の仕方は、
<meta name="viewport" content="指定内容">
です。ここで「指定内容」は一般的には次の様になります。
width=device-width・・・表示画面横幅はデバイス（スマホ等）の横幅で表示
initial-scale=1.0・・・最初に読み込まれる時の拡大率を１（等倍）で表示
ピンチでズームできるようにしたい場合は
user-scalable=yes
と記述して、minimum-scale=0.25、maximum-scale=1.6 と追加して行きます。minimum、maximumは0～10.0の範囲です。ただし、user-scalable、minimum-scale、maximum-scaleが記述されていない場合は 上記の指定内容が初期値として実行されます。
実際のHTML文書には下の矢印で指し示した１行を追加しました。
その結果、Google Chrome野スマホ画面は下の様に変わります。文字や画像はパソコンと同じ程度の見やすい大きさになりましたが、 反面、ページの表示としては途中で切れてしまいました。スクロール、ドラッグすれば、もちろん全ページを見る事は可能ですが。
Javascriptのnavigator.userAgentでCSS切り替え
今回、JavaScriptを使い、以下の条件を持つブラウザはスマホのユーザーエージェントと判断し、スマホ用CSSを使います。
navigator.userAgent.indexOfにiPhoneが含まれる場合
navigator.userAgent.indexOfにiPodが含まれる場合
navigator.userAgent.indexOfにAndroidとMobileとが含まれる場合
navigator.userAgent.indexOfにWindowsとPhoneとが含まれる場合
navigator.userAgent.indexOfにFireFoxとMobileとが含まれる場合
実際のHTML文書中の<head>～</head>は下の様に記述ています。
view port指定後の<head>～</head>に比べると、<script>～</script>の部分を追加し、css文書へのリンク部を削除しています。 実際にこのJavaScriptが思い通りに働くかどうかを確認した結果、下の様になりました。
便宜上スマホ用のcss文書「otasukesp.css」でdiv.containerの背景色を透明にしてみました。スマホ画面では、それがちゃんと反映されています。 なお、パソコン画面ではdiv.containerの背景色は今まで通り緑色に指定しており、画面の画像は有りませんが、それも反映されています。
これでスマホ用のCSS文書作成の準備が出来ました。
