file:///Y:/Qpon_com/demo/soniya/photo/01.jpg
モバイルフレンドリーなページの作り方 |
---|
パソコンでもスマホでも読みやすいホームページのことをモバイルフレンドリーなペーと言います その作り方は2通りあります。 一つは内容は同じでレイアウトがスマホサイズの横幅640以内のページを作っておき、 訪問者の機種をjavascriptで調べてジャンプさせる方法です。 パソコンとスマホも識別は、 1、横幅の狭いディスプレー <script> if (window.matchMedia && window.matchMedia('(max-device-width: 640px)').matches) { location.href="スマホ用ページ "; } </script> 2、縦長のディスプレー <script> if(screen.width<screen.height){ location.href="スマホ用ページ "; } </script> 3、AndroidとiPhone ちょっと複雑なので省略します もう一つは 一つのページで、スマホだったらスマホサイズに変化するレイアウトにしておく 1、ビューポートを設定して置くことです これは<HEAD>タグ内の <meta name="viewport" content="width=device-width"> を追記するだけです 2、パソコンでページをブラウザで開いて、ブラウザの横幅を狭くした時、 レイアウトが狭くなり横スクロールバーを使わなくてもすべて見られるページにしておくこと これは、ソースの中で横幅 WIDTH= に固定値を使わない 使う場合は「%」で指定しブラウザの横幅の変化に合わせて変化するように作り込むこと そうすると、広いパソコンのディスプレーでは横に広がりすぎる場合は <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> を挿入する その結果パソコンでは幅800ピクセルで中央揃えされたレイアウトになり、 スマホはそれぞれのスマホの横幅に合ったレイアウトになります 作ったら、Googleのモバイルフレンドリーテストページ https://search.google.com/test/mobile-friendly?hl=ja でチェックしておくとよい |
モバイルフレンドリー化支援サイト
|
|