スマホとパソコンで画像を切り替える

ライフ・バンクサービス「人生金庫」は安否確認サービスと連動して、もしものときにキチンとエンディングノートの情報を継承できる仕組みをご提供しています。

いつでも、どこでもエンディングノートを、快適に入力できるできるように、スマホでも見やすくをテーマにホームページの作成を指定ます。

パソコンとスマホのホームページの大きな違いの一つ。。

それは、画面の幅です。

画像で表現したいとき、パソコンでは横幅も縦の長さも気にしなくて作れますが、スマホではどうしても横幅に制限が出てきてしまいます。

とすると、パソコン用とスマホ用の２つを作って切り替えれば。。

ごく普通に出てくる考え方ですよね。

手間ですけど。。(^^;

画像切り替えはどうしているの？

「人生金庫」で使用しているテーマは「Lightning」ってのを利用しています。

Bootstrapベースのテーマなので、Bootstrapの機能を今回は使用してみました。

使ったクラスは「hidden-{prefix} , visible-{prefix}」

hidden：モニターが当該のサイズになると非表示

visible：モニターが当該のサイズになると表示

prefixとしては、bootstrapではおなじみの「xs,sm,md,lg」を記載していきます。

「人生金庫」ではパソコンの場合はhidden-xs、スマホの場合はvisible-xsで対応しています。

自分で切り替え用のロジックを作るほうがわかりやすいかも・・・しれませんが(^^;

投稿者プロフィール

上辻敏之

株式会社スタジオくまかけ代表取締役で業界としては30年近く存在(^^;
数年前に事故で緊急入院し、突然連絡が取れなくなり、仕事に支障をきたした経験から、事業を継続させるためには安否確認と自動的な情報継承が必須だと考えました。
当初他社のサービスを利用するつもりで探したのですが、自分にフィットするものがないため「人生金庫」の開発をスタート。
「終活」に興味を持ち、気になった情報を収集して発信しています。