中途半端を極める

web関連で役に立ちそうなものを紹介いたします

javascript

レスポンシブサイトにPC用とスマホ用の切り替えボタンをつける方法を紹介

投稿日:

最近レスポンシブサイトが増えてきました。スマートフォン用のサイトにはPC用を表示するボタンがついていますが、その機能を実装する方法を紹介いたします。javascriptを使用いたします。

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;
    });
});

name=’viewport’を利用する方法みたいですので、PCでは動作確認ができません。
※name=’viewport’はスマートフォンのみで効きます。

参考サイト:レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた
http://katoshun.com/blog/switch-screen.html

-javascript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

【javascript】西暦を自動的に更新されるようにjavascriptで表示する

今回は西暦を自動的に更新されるようにできるjavascriptをメモしておきます。 ・現在の西暦を自動的に取得する方法。 ・最終更新日の西暦を取得する方法。 2パターンあります。 コピーライトの部分と …

【javascript】複数の画像をウィンドウ幅に合わせてカルーセル風に実装(bxslider編)

ウィンドウ幅いっぱいにスライドを表示させたい。 そう思ってもなかなか思うような動作をするjavascriptを見つけるのが困難です。 見つけたとしても、それがレスポンシブに対応するのか否か。 そんなこ …

【javascript】年齢認証ページの作り方 一例

エロサイトや酒の紹介ページ(販売ページ)などに使えるjQueryを紹介いたします。

【javascript】レスポンシブデザインにも使用できる!マウスオーバーするとメインの画像が切り替わるjQuery「ImageNavigation」

今回はマウスオーバするとメインの画像が切り替わるjavascriptを紹介いたします。 FLASHなどではこのような動きをするものはあるのですが、jQueryではなかなかありそうでない動きですので、重 …

【javascript】SWFObjectで配置したFlash下に、ドロップダウンメニューが隠れてしまう

jquery.droppy.jsなどのドロップダウンメニュー(プルダウンメニュー)の下にFlashを配置すると、プルダウンメニューがFlashの裏側に表示されてしまう。CSSでFlashコンテンツにz …