【スマホとPCでCSS切り替え】自動的にスマホ用とPC用でスタイルシート(CSS)を切り替えるホームページの作り方（javascript/HTML）

PC/プログラム/ゲーム/ネット系レポ TOPはこちら

スマホとPCで適用するスタイルシートを変えたい

ホームページを運用している際に、スマホからのアクセスと、PCからのアクセスで適用するデザイン（スタイルシート）を変えたいと思うことは多いと思います。

自動的に切り替えるページのサンプルをご紹介します。

端末を自動で識別して適用するスタイルシート（CSSファイル）を変えるHTML＆Javascript

パソコンかスマホからのアクセスを判別して、スタイルシート（CSS）を変えるHTMLファイルとJavascriptのファイルです。

ついでにViewportの設定もPC向けとスマホ向けで若干設定を変更します。

なお、あらかじめ、パソコン向けのスタイルシートとして「css_pc.css」というファイル、スマホ向けのスタイルシートとして「css_sp.css」というファイルがある前提で記載します。

index.html の中身

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Language" content="ja">

<script type="text/javascript" src="script.js"></script>
<SCRIPT> auto_css(); </SCRIPT>

<title>ホームページ</title>
</head>
<body>

：
：

</body>
</html>

script.js

// 共通変数
var SP_or_PC = 0;     // チェック後、PCの場合は0 ・スマホの場合は1が変数に格納されます

function auto_css()
{
    check_pc_sp();
    if ( SP_or_PC == 1 )     //スマートフォンからのアクセスの場合
    {
        document.write('<meta name="viewport" content="target-densitydpi=device-dpi, width=655px, maximum-scale=1.0, user-scalable=yes">\n');
        document.write('<link rel="stylesheet" href="css_sp.css" type="text/css" />\n');
     }
    else     // PCからのアクセスの場合
    {
        document.write('<meta name="viewport" content="target-densitydpi=device-dpi, width=850px, maximum-scale=1.0, user-scalable=yes">\n');
        document.write('<link rel="stylesheet" href="css_pc.css" type="text/css" />\n');
      }
}

//　スマホかＰＣを判別して、変数に設定する
function check_pc_sp()
{
    //　ユーザーエージェントの取得（小文字にしておく）
    var userAgent = window.navigator.userAgent.toLowerCase();

    //　スマホかＰＣを判別
    SP_or_PC = 0;
    if ( userAgent.indexOf('iphone') != -1 )      SP_or_PC = 1;
    if ( userAgent.indexOf('ipod') != -1 )          SP_or_PC = 1;
    if ( userAgent.indexOf('android') != -1 )     SP_or_PC = 1;
    if ( userAgent.indexOf('mobile') != -1 )      SP_or_PC = 1;
    if ( userAgent.indexOf('windows phone') != -1 )     SP_or_PC = 1;
}

以上です。