実際にHTMLやスタイルシートを変更して、どういった画面表示になるかを試してみる
基本方針としてはＣＳＳの変更のみで対応することにする
切替え作業に着手する前の状態は以下の通り
横幅を固定し、２カラムで作成したサイトを切替えの対象とする
最上段はheader部、中央はmain部と右横にsidebar部、最下段はfooter部となっている
横幅８００pxの固定幅で定義している
１．スマホの試行テストを開始する
スマホの表示をテストする
・違和感の有る画面が表示される
８００pxの固定幅画面全体を忠実にスマホ画面に表示する
文字は小さくて読みづらい、ピンチアウト（拡大）操作すれば読めるようにはなる
ＨＴＭＬを修正する（全ページのheader部の修正となるが、限定的なので方針内とする）
・ＨＴＭＬに【viewport】を追加する
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ >
スマホの表示をテストする
・違和感の有る画面が表示される
【initial-scale】を指定したにも関わらず、数倍に拡大されたものが表示される
sidebar部はオーバーフローしmain部の下方に回りこんで表示されている
文字は小さくて読みづらい、画面下方にはスライドバーが表示されている
ピンチイン（縮小）操作すれば読めるようにはなる、画面下方のスライドバーも見えなくなる
スマホ用のスタイルシートを用意する
・ＨＴＭＬに【link】を追加し、新たにスマホ用ＣＳＳを指定する
<link rel=”stylesheet” href=”css/smart.css” media=”screen and (max-width: 500px)” type=”text/css”/>
従来のＰＣ用ＣＳＳ定義の行の次に挿入する
共通のスタイルシートを先に、個別のスタイルシートを後に定義する
※ｌｉｎｋ命令と@import命令の読込み順位は不明、だが経験値としてこの順でないといけない
・ＣＳＳファイルを新たに用意する
【@import】命令で共通のスタイルシートを呼び出しておく
【width】で定義してある固定幅の値を１００％と上書き訂正する（当然複数箇所の対応となる）
スマホの表示をテストする
・違和感の有る画面が表示される
違和感は有るが、ＨＴＭＬとＣＳＳの値が反映され始めていると確信する
後は、ＣＳＳの微調整を繰り返して行い、気長に表示画面をスマホ用にするだけとなる
修正手順を整理しながら、少しづつ進める（実際には、行きつ戻りつの試行錯誤を何度と無く繰り返す）
・ＨＴＭＬの修正は以下の様にする・・・・・・表示幅の大きいモノから順に並べて定義する
<meta name=”viewport” content=”width=device-width,initial-scale=1″ / >
<link rel=”stylesheet” href=”css/pc.css” type=”text/css” media=”screen and (min-width: 1024px)”/>
<link rel=”stylesheet” href=”css/tablet.css” type=”text/css” media=”screen and (min-width:768px) and (max-width:1023px)”/>
<link rel=”stylesheet” href=”css/smart_l.css” type=”text/css” media=”screen and (min-width:480px) and (max-width:767px)”/>
<link rel=”stylesheet” href=”css/smart_s.css” type=”text/css” media=”screen and (max-width:479px)”/>
値の設定はスマホは320px x 480px、タブレットは768px x 1024pxと想定している
・ＣＳＳの修正は以下の様にする
【width】を１００％にする、画面横幅いっぱいに表示されると想定する
【background-color】を使って各ＣＳＳごとに色を変えた、ＣＳＳ定義の反映状況の確認に使用する
HTMLの記述やＣＳＳの定義に自信が無い初期段階での表示テストには有効であった
スマホの表示をテストする
縦にして表示すると
特定のブロックだけが右に飛び出している
背景の色を見て、修正した縦型ＣＳＳが反映されていると確信する
横にして表示すると
画面からはみ出さずにピッタリと収まっている
文字の大きさがアンバランスな感じ、途中で切れている部分もある
背景の色を見て、修正した横型ＣＳＳが反映されていると確信する
縦で表示してから横にすると
文字も大きくなり、画面からはみ出してしまう、ピッタリ収まっていたのに・・・・かなり長時間悩んだ
収まらなくなった原因は【inirtial-scale】はページを読み込んだ時のみ有効と分かる
読み込んだ後で縦横を変化させても、ページの再読み込みは行わないため
320px分を480pxにして表示したため、１．５倍の大きさになって表示されたと分かる
ここまでのテストで基本的な動きが保障されたので、後はＣＳＳの微調整だと割り切る
デバイスの表示幅の範囲に合わせて最適な固定幅を定義をしたり
デバイスの物理属性に合わせて最適なＣＳＳを選んだり
試行テストの種類にはまだ先がある、が一旦ここで打ち切ってＣＳＳの微調整を行って収束させる
２．タブレットの試行テストを開始する
タブレットの表示をテストする（８００pxの固定のまま）
横にして表示すると
画面からはみ出さずにこじんまりと中央に収まっている
背景の色は、タブレット用に指定した色ではなくて、ＰＣ用の色が反映されている
タブレットはＰＣ用のＣＳＳで賄えると判断し、タブレットのテストは終了させる
コメントを残す