投稿日:

機種を判別して内容を変更する

最近スマホの案件が増えてきました。
機種によって導線を変えることも多そうなのでここにメモを。。。

HTML

<!-- 初期設定はiosに。。。-->
<div id="download">
<a href="http://store.apple.com/" id="href_appdownload">
<img src="../img/bnr_dl_ios_a.png" id="btn_appdownload">
</a>
</div>

javaScript

/**
 *  UAを判定してダウンロードボタンの内容を変更する
 */
$(document).ready(function(){
var agent = navigator.userAgent;
var ua='';
if(agent.search(/iPhone/)!=-1){
ua = 'ios';
}else if(agent.search(/Android/)!=-1){
ua = 'android';
}else{
ua = 'pc';
}
if(ua == 'ios'){
;
}else if(ua == 'android'){
$("#href_appdownload").attr("href","http://play.google.com/");
$("#btn_appdownload").attr("src","../img/bnr_dl_android.png");
}else if(ua == 'pc'){
$("#href_appdownload").attr("href","");
$("#btn_appdownload").attr("src","../img/bnr_dl_pc.png");
}
});
投稿日:

リストのマーカーを二つ設定する

リストの項目に二つ背景画像を表示したい時は

.mobile-nav-1 li{
background: url(../img/mark.png) , url(../img/arrow.png) ;
background-repeat: no-repeat, no-repeat;
background-position: top 30px left 20px, top 30px right 20px;
}

とすると、どちらも場所指定して表示できます。