file:///Y:/Qpon_com/demo/soniya/photo/01.jpg
モバイルフレンドリーなページの作り方
パソコンでもスマホでも読みやすいホームページのことをモバイルフレンドリーなペーと言います
その作り方は２通りあります。
一つは内容は同じでレイアウトがスマホサイズの横幅640以内のページを作っておき、
訪問者の機種をｊａｖａｓｃｒｉｐｔで調べてジャンプさせる方法です。
パソコンとスマホも識別は、

１、横幅の狭いディスプレー
<script>
if (window.matchMedia && window.matchMedia('(max-device-width: 640px)').matches) {
location.href="スマホ用ページ ";
}
</script>

２、縦長のディスプレー
<script>
if(screen.width<screen.height){
location.href="スマホ用ページ ";
}
</script>

３、ＡｎｄｒｏｉｄとiPhone
ちょっと複雑なので省略します
もう一つは
一つのページで、スマホだったらスマホサイズに変化するレイアウトにしておく

1、ビューポートを設定して置くことです

これは＜ＨＥＡＤ＞タグ内の
<meta name="viewport" content="width=device-width">
を追記するだけです

2、パソコンでページをブラウザで開いて、ブラウザの横幅を狭くした時、
レイアウトが狭くなり横スクロールバーを使わなくてもすべて見られるページにしておくこと

これは、ソースの中で横幅
ＷＩＤＴＨ＝
に固定値を使わない
使う場合は「％」で指定しブラウザの横幅の変化に合わせて変化するように作り込むこと
そうすると、広いパソコンのディスプレーでは横に広がりすぎる場合は
<body>タグの直後に

<script>
ww=800;
if(window.innerWidth<ww){
ww=window.innerWidth;
}
document.width("<table width="+ww+" style='margin:auto;'><tr><td align='center'>");
<script>


</body>タグの直前に

</td></tr></table>

を挿入する

その結果パソコンでは幅８００ピクセルで中央揃えされたレイアウトになり、
スマホはそれぞれのスマホの横幅に合ったレイアウトになります

作ったら、Ｇｏｏｇｌｅのモバイルフレンドリーテストページ
https://search.google.com/test/mobile-friendly?hl=ja
でチェックしておくとよい
モバイルフレンドリー化支援サイト