Web Materia BLOG

ウェブマテリアブログ

Jul

31

2014

0

COMMENTS

PCとスマートフォンの表示切り替えボタンをつける

Category:Javascript

PCとスマートフォンの表示切り替えボタンをつける
通常PCサイトとスマートフォンサイトを切り替えるボタンではPCサイトへのリンク、スマートフォンサイトへのリンクを設定します。 ですがレスポンシブデザインでは1ソースなのでそういう訳にはいきません。ですので今回はjqueryを使用する方法をご紹介。  

今回実装したい内容

  • 「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える
  • 最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる
 

実装方法

具体的にはviewportの実装幅をjqueryを使用して指定する事で切り替えます。  

PC用のviewportの記述

<meta name="viewport" content="width=1024" />
 

スマートフォン側のviewportの記述

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
 

HTMLの記述

<ul>
     <li><a id="btnPC" href="#">PC</a></li>
     <li><a id="btnSP" href="#">SP</a></li>
</ul>
 

Javascript

$("head").append("<meta name='viewport' content="
    +($.cookie("switchScreen") == 1 ?
        "'width=1024'" :
        "'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'")
    +" />");
$(document).ready(function() {
    $("#btnPC, #btnSP").click(function() {
        $.cookie("switchScreen", $(this).attr("id") == "btnPC" ? 1 : 0);
        location.reload();
        return false;
    });
});
 

参考記事

http://katoshun.com/blog/switch-screen.html

Comments

comments



Archive

Category


PageTOPへ