パソコンとスマートフォンで別のものを表示する

パソコンとスマートフォンでは別のものを表示させたい！という要望に答えまして、サンプルをご紹介いたします。

HTMLブロックにjavascriptを使って、文字を端末によって出し分ける処理になります。

これを応用して、前回こちらの記事で紹介しました、サイトにお問い合わせフォームを設置する、の例で書いてみました。

Google Formはサイズ固定になりますので、そのまま設置すると、スマートフォンで表示した際に、フォームが画面からはみ出てしまいます。

このままではスマートフォンでアクセスされたお客様が、フォームで入力するのが難しくなってしまいます。

なので、パソコンとスマートフォンでは表示サイズを変えて表示してみましょう。

サンプルをCodePenで書いてみましたので、参考にしてみてください。

※ こちらのサンプルフォームのURLをそのまま使わないようにご注意下さい。

この例では、パソコンとスマートフォンで、サイズを変更して表示する処理になっています。

パソコンでは幅700px、高さ500px、スマートフォンでは幅200px、高さ500pxにしています。

ただ、このままでは、大きな幅のスマートフォン、小さな幅のスマートフォンを考えると最適ではありません。

パソコン・スマートフォンで出し分けする端末の幅を「spWidth」などに当てはめるよう書き換えると、もっと色々な端末に最適な表示にすることができます。

HTMLブロックを使って、お好みのサイト作りをぜひ試してみてください。