楽天ゴールドのページにスマホ誘導バナー

jQueryで「ユーザエージェント」を識別

「iPhone」、「Android」+「Mobile」にバナーを表示

バナーは画像ではなく「javascriptでテキスト出力」+「外部CSS読み込み」。

HTML(ページの最上部に記載)

<div id="smartphone"></div>

 

CSS(smartphone.css)

#smartphone {
    width: 90%;
    text-align:center;
    font-size:36px;
    border:#969696 solid;
    padding:30px;
    margin:20px auto;
    border-radius: 10px;
    background-color:#f4b98a;
}

jQuery(リンク  js/jquery-2.1.0.min.js 設置の場合)

<script src="js/jquery-2.1.0.min.js"></script>

jQuery(HTMLのID=smartphone  CSS=css/smartphone.css 設置の場合)

<script type="text/javascript">
$(document).ready(function(){
    if ( navigator.userAgent.indexOf('iPhone') > 0 ||(navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {
        $("head").append("<link>");
        css = $("head").children(":last");
        css.attr({
        rel: "stylesheet",
        type: "text/css",
        href: "css/smartphone.css"
}); 
        $("#smartphone").html('<p><a href="http://www.rakuten.co.jp/●●●●●/">スマートフォンサイトはこちら</a></p>');
    } 
});
</script>

 


sp_banner

コメント

タイトルとURLをコピーしました