【jquery】楽天GOLD用 パソコンのゴールドページにスマホでアクセスしたらGOLDスマホページにリダイレクト
11/17に書いた↓があるんですが、
楽天GOLDなどでスマホに飛ばすとき[jquery]
諸事情でPCゴールドを見せるのが微妙だったので、
とりあえず別verで対処しておこうかなーと。
まあ、楽天限定じゃないので、実質的にはjqueryでのスマホ振り分けになりますね。
●前提条件として
pcとスマホで同じページがあること
たとえば http://www.rakuten.ne.jp/gold/●●●/aaa.html がPCとした場合、
スマホでは http://www.rakuten.ne.jp/gold/●●●/sp/aaa.html のページがあるのが条件です。
<script type="text/javascript"> <!-- var currentUrl = window.location.href; var resultUrl = currentUrl.replace("http://www.rakuten.ne.jp/gold/●●●/", "http://www.rakuten.ne.jp/gold/●●●/sp/"); if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { window.location.href = resultUrl; } --> </script>
これはどこのページをスマホで見ても対応したスマホページを表示させかったので、URLを置換して表示させています。
無い場合は普通にトップにリダイレクトさせればよいので
<script type="text/javascript"> <!-- if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { window.location.href = "http://www.rakuten.ne.jp/gold/●●●/sp/"; } --> </script>
こうなりますのです。
楽天の場合は大体がドリウィで構築してることが多いのでPCのテンプレヘッダに入れて構築すれば一瞬で完了^^b
ユーザビリティ的には1番目が良いかな~と思ったり。
[覚書]スマホでページ内リンク
ページ内リンク押せないので焦ってたらスマホは同ページ内リンク効かないですね
というわけで、こちらのサイトさんのコードを拝借しまして
http://mermaid1112.hatenablog.com/entry/2012/09/01/192503
http://jsdo.it/blogparts/sFQq
<script> var flag; $('a') .bind( 'touchstart', function(){ flag = true; }).bind( 'touchmove', function(){ flag = false; }).bind( 'touchend', function(e){ linkEvent(this,e); flag = false; }); function linkEvent(self,e){ if(flag){ var url = $(self).attr('href'), $target = $(url); if ($target.length) { e.preventDefault(); //$(window).scrollTop($target.offset().top); $('html,body').animate({ scrollTop: $target.offset().top }, 'normal', 'swing'); return false; } } } </script>
//で消している下の部分を
$(window).scrollTop($target.offset().top);
スムーズスクロールにしたかったんでこっちに修正して完了!
$('html,body').animate({ scrollTop: $target.offset().top }, 'normal', 'swing');
スマホ メニューのスクロール慣性に対応したドロワーメニュー【spslidemenu】
正式名称をようやく知りました。ドロワーメニューっていうですねアレ。
sidrを入れていたのですが、iphoneのchromeとandroid標準ブラウザ(仕様的)で不具合頻発だったので
探しに探しまくりいろいろ検証した(約3時間ほど)結果、
be-hase.comさんの【Spslidemenu】が操作性・安定性ともに一番使いやすいかと思います。
http://be-hase.com/javascript/428/
※ただやはり「android標準ブラウザ」は強敵で、demoにあります「No Header」はメニューが開かず延々更新されるという罠。
(はじめてandoroidがにくいと思った瞬間)
まさしく↓ですね。4時間ほど格闘しました。
Android端末におけるオーバーレイ表示時の困った現象の報告と、その対処法について
http://blog.bluearrowslab.com/smartphone/topicks/237/
とりあえずなんちゃって対処方法はまた今度。。。覚えてたら書こう。。。
[スマホ]縦向き・横向き切替のCSS表記[CSS3]
スマホの縦横でCSSを切り替えたい時用
http://www.db.gs/article/255889697.html
/*縦向き*/ @media only screen and (orientation : portrait) { .class { width:480px; height:44px; } } /*横向き*/ @media only screen and (orientation : landscape) { .class { width:480px; height:88px; } }
スマホページ 横スライドページ形式の参考サイト
ずっと何がしか面倒そーややこしそーで避けていたスマホコーディングにもとうとう手を出さないといけなくなりまして...
今回はこの方法じゃないので、使わないのですが
今後役にたつと思うので(というか作ってみたいので)φ(・ェ・o)~メモメモ
【jQuery mobile でまず押さえておきたいページ構造】
http://billboardtop100.net/BLOG/jquery-mobile/cat26/
[Jquery]スマホ対応のイメージスライダー[Flexslider]
スマホ案件で既存で使われてたスライダーがうまく作動しないってことだったのでこちらに切替。
スワイプもフリックも使わない単純なイメージスライダーが良かったので、軽いし導入もらくらくでした。
[Flexslider]
http://www.woothemes.com/flexslider/
導入方法は下記を参考しました
http://sterfield.co.jp/designer/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E5%AF%BE%E5%BF%9C%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC.html