jQuery：CSSファイルの切替え

条件によって外部CSSファイルを切替える方法です。

例）PC or スマホ によって切替える

HTML

<link id="private_css" type="text/css" href="css/test.css" rel="stylesheet" />

※id属性を設定するのがポイント

jQuery

$(document).ready(function(){
　if (getBrowserOs() == "Mobile") {
　　　$("#private_css").attr("href","css/test_sp.css");
　}
})

JavaScript

function getBrowserOs() {
　var userAgent = navigator.userAgent;　　　　　　　// ユーザエージェント取得
　if (userAgent.indexOf(" AppleWebKit/") != -1
　　&& userAgent.indexOf(" Mobile") != -1) {　　　　// スマホ判定
　　return "Mobile";
　}
　return "PC";
}

HTML：iPhoneに合わせた画面を表示

iPhoneでホームページを参照すると、左上端に小さく表示されることがあります。
iPhoneに合った表示をさせるには、<META>タグにてViewport操作を行います。

HTML

<meta name="viewport" content="initial-scale=1.0, minimum-scale=0.5" />

iPhone用SafariやViewportについて
Safari Web Content Guide：Configuring the Viewport

Viewportのプロパティ
Safari HTML Reference：Supported Meta Tags

JavaScript：ブラウザ端末の判定

ユーザエージェントを取得し、含まれる文字列で判定します。

JavaScript

function getBrowserOs() {

　var userAgent = navigator.userAgent;　　　　　　　// ユーザエージェント取得

　if (userAgent.indexOf(" AppleWebKit/") != -1
　　&& userAgent.indexOf(" Mobile") != -1) {　　　　// スマホ判定

　　if(userAgent.indexOf(" iPhone") != -1) {
　　　return "iPhone";
　　}
　　else {
　　　return "Android";
　　}
　}

　return "PC";
}