*レスポンシブWEBデザイン。スマホの時だけ画像へのリンクON!にするjquery

2015.1.20 0Comments お知らせ

デモはこちら

スタイルシートへまずこちらを追加します、

.m_link_cursor{cursor:default;}

次にリンクには「m_link」としてクラスを追加。
<a class=”m_link” href=”画像のURL”><img src=”画像のURL” alt=”” /></a>
そんでこのソースを貼付ければスマートフォンのときだけ画像のリンク。パソコンの時はリンクなしになります。

<script type=”text/javascript”>// <![CDATA[
$(document).ready(function(){
    var agent = navigator.userAgent;
    //スマートフォンの判定
    if(agent.search(/iPhone/) == -1 && agent.search(/Android/) == -1){
      $(function(){
         //まずスマホ以外ならリンクのカーソルを擬似的にデフォルトにする。
        $(“a.m_link”).addClass(“m_link_cursor”);
         //そしてクリックしても画像のリンクがないようにする。
        $(‘a.m_link’).click(function(){
          return false;
        })
      });
    }
});
// ]]></script>