iPhoneサイトでPC or スマホ切り替え表示を可能にする

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

iPhoneサイトでPC表示を可能にする切り替えボタンを実装する【レスポンシブテンプレート限定】

サンプル画像

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

すべてのレスポンシブテンプレートで動作検証を行っているものではありません。ご了承ください。

通常のブログなんかだと PCは PC用レイアウトで、
iPhone(スマホ)ではスマホ用に最適化されたレイアウトで表示された方が
とても見やすいんですが、
ECサイトや商品紹介サイトなんかだと余計な表示は省いたスマホ用レイアウトではなく
PC用レイアウトでサイト全体をじっくり見渡したいと思う時がたまにあるもんです。

 

こんなとき、iPhone(スマホ)サイトの先頭や最後あたりに「PC・スマホ」切り替えボタンがあって
PCボタンをタップすると PCレイアウトに切り替わり、再度スマホボタンをタップすると通常のiPhone(スマホ)レイアウトに戻ってくれたりするとめっちゃ嬉しいもんです。

 

サイト作運営側にしてみれば、表示方法が選択可能な 2パターンあった方が
よりじっくりサイトを見てくれるという期待もあるでしょうし。

 

これ、以前から挑戦はしてたんですが、
リダイレクトで iPhone(スマホ)サイトを表示させる通常のシリウステンプレートで実現させるのは
私のスキルでは無理でした。(そのうちできるようになるかな)

 

しかしレスポンシブデザインテンプレートならなんとかなります。

 

こちらがその実装キャプチャ画像。

 

キャプチャ画像

 

”PC表示”をタップすると…PCと同じ画面に変わりました。

 

キャプチャ画像

 

今回の「PC・スマホ」切り替えボタンは、

PCで見た場合はボタンが表示されず iPhone(スマホ)で見たときのみ表示されるというものです。

 

ということでいろいろ試行錯誤した結果、
どうにかシリウスへの実装がうまくいったのでご紹介します

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

購入ページへ


TOPへ戻る