モバイル端末用に表示を切替える（試行編、対応編）も必ず読んでください
ＰＣサイトをモバイル端末用サイトに変換する方法
・ＷＰで構築したサイトはプラグインを使って切替える方法
【WPtouch】等のプラグインを使って、ＰＣサイトを変換する
PCサイトとのデザインの統合が取りにくい
・ＰＣサイトをサービスを使って切替える方法
【shutto】等のサービスを使って、ＰＣサイトを変換する
PCサイトから、パーツやコンテンツをドラッグアンドドロップして簡単に構築できる
・レスポンシブWebデザインへ切替える方法
スクリーンの横幅に合わせてスタイルシートを切り替える方法、手軽に対応できる
CSS3のメディアクエリを使って、ＰＣサイトを変換する
端末に合わせて、ファイルサイズやユーザインタフェースが最適化されるわけではない
・スマホ向けフレームワークを使って再構築する方法
オープンソースのスマホ向けフレームワークを利用して再構築する
【jQuery Mobile】等を使って、ＰＣサイトを変換する
・HTML5とCSS3で新たに構築する方法
モバイル端末用のサイトをゼロから構築する、ＰＣサイトは残す
デザインやレイアウトの自由度が最も高く、いちばん習得しやすい方法
ＰＣサイトと更新の同期をとる必要が発生する
「レスポンシブWebデザイン」での方法を記述する
ＨＴＭＬソースを修正する（その１）
HTMLヘッターのタグ部分に【viewport】を設定する
デバイスの横幅で表示する、という意味である
モバイル対応を施さないと
何も対応せずにPC 向けのサイトを表示すると、９８０pxの前提で表示するので
結果として、文字が小さくなって表示され読みにくくなる
デバイスの横幅で表示すると
<meta name=”viewport” content=”width=device-width”>
横向きにした時に、縦向きの画面を横に引き伸ばして表示しようとするので
結果として、表示される文字数は同じで、各文字が拡大表示され読みにくくなる
横向きの時は一行の文字数を増やすと
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>
横向きにした時に、横に引き伸ばさずに等倍（１．０）で表示するので
結果として、横１行に表示される文字の数は多くなる
但し、ピンチによる拡大・縮小ができないという大きな弱点が生じる
ピンチを可能にする
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ >
ピンチは可能で横向きにした時に１行の文字数も増える
最後に
文字のサイズを固定化したいなら、CSS に次の様に指定する
body {
-webkit-text-size-adjust: 100%;
}
ＨＴＭＬソースを修正する（その２）
外部スタイルシートをLink要素と【media】を用いて互いに適用させる
<link rel=”stylesheet” href=”css/smart.css” media=”screen and (max-width: 500px)” />
<link rel=”stylesheet” href=”css/tablet.css” media=”screen and (min-width: 501px) and (max-width: 800px)” />
<link rel=”stylesheet” href=”css/style.css” type=”text/css” />
１行目は、最大５００px（４８０pxのスマートフォンとする）の場合のＣＳＳを指定する
２行目は、５０１px～８００px（タブレットとする）の場合のＣＳＳを指定する
３行目は、それ以上（ＰＣとする）の場合のＣＳＳを指定する
ＨＴＭＬソースを追加修正する（その３）
画像の制御などは横幅に左右されるので、正確な対応が必要である
画像の横幅を指定しなかったり、１００%で指定する等等
対応しないと、横スクロールしようとするので見難くなる
スタイルシート（ＣＳＳ）を修正する
フレキシブルレイアウトを適用する場合には
要素の単位を%で指定したり、最小幅と最大幅を指定して微調整を図る
コメントを残す