「スマホレイアウト」を、ボタンクリックで「パソコンレイアウト」にチェンジ
レスポンシブWEBデザインとは、スマートフォンやパソコンなどの各端末に合わせてレイアウトをcssで変更するものですが、スマホからあえてPC画面を見たい人もいると思います。
今回はクリタス様制作のjavascriptを使って、ウィンドウ幅800px以下の端末を対象にPC画面に変更できるボタンを設置してみましょう。
動作環境について
※古いスマホ機種など、一部の端末ではボタンを押してもレイアウトが変更しない場合があります。
フリープログラムにつき全ての端末での動作保証はできませんので、予めご了承下さい。
スクリプト利用規約【※必ずお守り下さい】
レイアウト変更スクリプトのjavascript(viewport.js)はクリタス様に所有権があります。許可なく改造・再配布する事を禁止します。
※viewport.jsファイルを当社(Template Party)のテンプレート「以外」に使う場合は必ず必ずこちらをお読みください。
使い方
viewport.jsのダウンロード
こちらよりダウンロードして、お手元のテンプレートのjsフォルダに移動して下さい。
テンプレートのhtml側を編集
画面切り替え用のボタンとスクリプトの読み込みタグを追加します。
貼り付け場所は邪魔にならない一番最後あたりでいいでしょう。
↓以下のタグをコピペして下さい。
cssを追加
cssフォルダのstyle.cssのパソコン用の設定内に以下を追加します。
設定内容は好きに変更してもらって構いません。
完成です。
スマートフォンなどの実際の対象端末からプレビュー確認してみて下さい。（※PCでウィンドウ幅を狭くしても動作確認できないのでご注意下さい。）
画面の一番下に以下のようなリンクテキストが出ていると思いますのでクリックして動作確認して下さい。
※冒頭にも記載していますが、古いスマホ機種など、一部の端末ではボタンを押してもレイアウトが変更しない場合があります。
フリープログラムにつき全ての端末での動作保証はできませんので、予めご了承下さい。
補足：幅判定の数値を変更したい場合
viewport.jsの最後に、
window.screen.width > 800
という文字列があるのでここの数値を変更して下さい。
上記の場合、801px以上のスクリーンサイズである場合にボタンを表示しないという意味になります。
レスポンシブテンプレートで使っている開閉ブロック（openclose.js）はスクリーンサイズでなくウィンドウ判定になっていますのでここを合わせても条件が異なって動作する場合があります。
また、iPhoneやiPadの場合、横に倒して見た場合も「縦画面」で見た場合のスクリーン幅の判定となります。
縦横画面を切り替えた場合のjavascript判定はブラウザの「再読み込み時点」となります。
cssのようにリアルタイムではないのでご注意下さい。