【Labs】レスポンシブデザインにも表示切り替えボタンを付ける⁉️【レイアウト決定版】

こんにちは（・∀・）

前回投稿した【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️でご紹介しましたレスポンシブデザインレイアウトに、PCとモバイルサイトを行き来できるボタンを付けてみました。

レスポンシブデザインで表示できれば十分だとは思いますが...

「PCとモバイルの表示を切り替えられるボタンも付けたい...」なんてオーダーをいただいた場合、このJavaScriptで対応できます。

確かにスマホで見てるときに「このページPCサイトで見たいのになぁ」ってときってあるかも...

ブレークポイント

CSSのブレークポイントは前回と同じ10個です。

PCとモバイルの切り替えは835pxにしました。

この辺はお好みで調整してください。

それでは最初にサンプルをご覧ください。

Result

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ

ファイル構成

1. index.html
2. style.css
3. style-sp.css
4. style-pc.css
5. switch-css.js

1. index.html
2. style.css...基本的な部分と画面サイズ320pxまでの設定
3. style-sp.css...835px以下の設定
3. style-pc.css...835px以上の設定
3. switch-css.js...画面サイズで切り替えるJavaScript

それではコードを見ていきます。

HTML内のボタンを設置したい場所に次のコードを記述。

HTML

<div id="switchbtn"></div>

CSSは基本デザインと320px以下のstyle.css、モバイル用のstyle-sp.cssとPC用のstyle-pc.cssになります。

前回投稿と内容は同じですが、３つにファイルを分けました。

CSS

/*--style.css-----------------------------------------------------*/
基本デザインと320px以下のレイアウト用

ここは省略

/*--style-sp.css--------------------------------------------------*/
@charset "utf-8";
@media (min-width: 321px) {
  .sample-demo h3:after {
  content: "321px〜360px";
  }
/* ** */}
@media (min-width: 361px) {
  .sample-demo h3:after {
  content: "361px〜375px";
  }
/* ** */}
@media (min-width: 376px) {
  .sample-demo h3:after {
  content: "376px〜412px";
  }
/* ** */}
@media (min-width: 413px) {
  .sample-demo h3:after {
  content: "413px〜414px";
  }
/* ** */}
@media (min-width: 415px) {
  .sample-demo h3:after {
  content: "415px〜834px";
  }
/* ** */}
/*--style-pc.css--------------------------------------------------*/
@charset "utf-8";
@media (min-width: 835px) {
  .sample-demo h3:after {
  content: "835px〜959px";
  }
/* ** */}
@media (min-width: 960px) {
  .sample-demo h3:after {
  content: "960px〜1023px";
  }
/* ** */}
@media (min-width: 1024px) {
  .sample-demo h3:after {
  background: #9fb7d4;
  content: "1024px〜1059px";
  }
/* ** */}
@media (min-width: 1060px) {
  .sample-demo h3:after {
  background: #e2ad22;
  content: "1060px〜1199px";
  }
/* ** */}
@media (min-width: 1200px) {
  .sample-demo h3:after {
  content: "1200px〜";
  }
/* ** */}

JavaScriptの構成はクッキー、画面サイズで振り分ける本体、切り替えボタンの三つです。

JavaScript

/*--cookie--------------------------------------------------------*/
function  setCookie(value) {
document.cookie = 'switch'+'='+value+'; expires='+'date.toGMTString(); path=/';
window.location.reload(true);
}
var cookie = document.cookie+';';
var cookies = cookie.indexOf('switch');
if(cookies != -1) {
var elm = cookie.indexOf('=',cookies);
var items = cookie.indexOf(';',elm);
var sv = cookie.substring(elm+1, items);
} else {
sv = 0;
}
/*--switch-css---------------------------------------------------*/
function switchCSS(){
var t = document.getElementsByTagName('body')[0];
var dir ="";//パス
var sp = '<link rel="stylesheet" href="'+dir+'style-sp.css">';
var pc = '<link rel="stylesheet" href="'+dir+'style-pc.css">';
var swidth = window.innerWidth;
var cwidth = 835;
if(sv == ""){//null
  if(swidth <= cwidth){//null sp
t.insertAdjacentHTML('beforeend', sp);
  } else {//null pc
t.insertAdjacentHTML('beforeend', pc);
  }
} else if(sv == 0) {//pc
t.insertAdjacentHTML('beforeend', pc);
} else if(sv == 1) {//sp
t.insertAdjacentHTML('beforeend', sp);
}
}
window.addEventListener('DOMContentLoaded',switchCSS,false);
window.addEventListener('resize',switchCSS,false);
/*--switch-btn---------------------------------------------------*/
function switchBtn(){
var t = document.getElementById('switchbtn');
var spBtn = 'PC | <a href="javascript:void(0)" id="spBtn">モバイル</a>';
var pcBtn = '<a href="javascript:void(0)" id="pcBtn">PC</a> | モバイル';
var swidth = window.innerWidth;
var cwidth = 835;
if(sv == ""){//null
  if(swidth <= cwidth){//null sp
t.innerHTML = pcBtn;
document.getElementById('pcBtn').addEventListener('click',function(){
setCookie(0)},false);
  } else {//null pc
t.innerHTML = spBtn;
document.getElementById('spBtn').addEventListener('click',function(){
setCookie(1)},false);
  }
} else if(sv == 0) {//pc
t.innerHTML = spBtn;
document.getElementById('spBtn').addEventListener('click',function(){
setCookie(1)},false);
} else if(sv == 1) {//sp
t.innerHTML = pcBtn;
document.getElementById('pcBtn').addEventListener('click',function(){
setCookie(0)},false);
}
}
window.addEventListener('DOMContentLoaded',switchBtn,false);
window.addEventListener('resize',switchBtn,false);

今回、画面サイズで切り替えるようにしましたが、ユーザーエージェントで切り替える方法に変えることも可能です。

レスポンシブデザインにプラスしてPCとモバイルを切り替えるボタンが付いていると使う側としては便利かもしれませんね。

関連リンク

【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️
【CSS】レスポンシブデザインのブレークポイントは⁉️