9月更新・前月(8月)の人気記事トップ10 09/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 09 ↑) 【Mac】Safariでソースコードを見る方法
- ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
- ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
- (圏外↑) 【GIMP】レイヤーをロック
【Labs】クッキーでスマホ・タブレット・PCを振り分ける
こんにちは（・∀・）
今回はクッキーを使ってスマホとタブレット、PCを振り分けるJavaScriptをご紹介します。
クッキーでスマホ・タブレット・PCを振り分ける
HTML
<head>内にstyle.jsを読み込みます。<body>内のボタンを表示したい場所にstylebtn.jsを読み込みます。
style.js、stylebtn.js本体のパスとstyle.jsの中に記述してあるCSSのパスは絶対パスにしてください。
<head>
<script src="/js/style.js"></script>
</head>
<body>
<script src="/js/stylebtn.js"></script>
</body>
CSS
/*外部ファイルstyle_pc.cssで保存してください。*/
#wrapper {
width: 1020px;
margin: 0 auto;
}
/*外部ファイルstyle_tab.cssで保存してください。*/
#wrapper {
width: 100%;
}
/*外部ファイルstyle_sp.cssで保存してください。*/
#wrapper {
width: 100%;
}
JavaScript
/*外部ファイルstylebtn.jsで保存してください。*/
/*------------------------------------------------------------------*/
function ChangeBtn(i,p) {
var iBtn;
var pBtn;
iBtn = i;
pBtn = p;
document.images[iBtn].src = pBtn;
}
if(sv == "") {//null
var ua = navigator.userAgent;
if( ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) || ( ua.indexOf('windows') > 0 && ua.indexOf('phone') > 0) || ( ua.indexOf('firefox') > 0 && ua.indexOf('mobile') > 0) ) {//null sp
document.write('PC | タブレット | モバイル');
} else if( ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 || (ua.indexOf('windows') > 0 && ua.indexOf('touch') > 0) || ( ua.indexOf('firefox') > 0 && ua.indexOf('tablet') > 0) ) {//null tab
document.write('PC | タブレット | モバイル');
} else {//null pc
document.write('PC | タブレット | モバイル');
}
} else if(sv == 0) {//pc
document.write('PC | タブレット | モバイル');
} else if(sv == 1) {//tab
document.write('PC | タブレット | モバイル');
} else if(sv == 2) {//sp
document.write('PC | タブレット | モバイル');
}
/*外部ファイルstyle.jsで保存してください。*/
/*--cookie----------------------------------------------------------*/
name_style = "STYLE";
function ChangeStyle(obj) {
document.cookie = name_style+"="+obj+"; expires=Fri, 31-Dec-2030 23:59:59 GMT; path=/;";
window.location.reload(true);
}
Cookie = document.cookie+";";
cSet1 = Cookie.indexOf(name_style);
if(cSet1 != -1) {
cSet2 = Cookie.indexOf("=",cSet1);
cSet3 = Cookie.indexOf(";",cSet2);
sv = Cookie.substring(cSet2+1, cSet3);
} else {
sv = 0;
}
/*------------------------------------------------------------------*/
var dir ="パスを入力してください";
if(sv == "") {//null
var ua = navigator.userAgent;
if( ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) || ( ua.indexOf('windows') > 0 && ua.indexOf('phone') > 0) || ( ua.indexOf('firefox') > 0 && ua.indexOf('mobile') > 0) ) {//null sp
document.write(' ');
} else if( ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 || (ua.indexOf('windows') > 0 && ua.indexOf('touch') > 0) || ( ua.indexOf('firefox') > 0 && ua.indexOf('tablet') > 0) ) {//null tab
document.write(' ');
} else {//null pc
document.write(' ');
}
} else if(sv == 0) {//pc
document.write(' ');
} else if(sv == 1) {//tab
document.write(' ');
} else if(sv == 2) {//sp
document.write(' ');
}