@caramu

//ここで商品ステータス取得
<!--{assign var=id value=$arrProduct.product_id}-->
<!--{foreach from=$productStatus&#91;$id&#93; item=status}-->
<!--{$status}-->
<!--{/foreach}-->
<!--{if $status == 5}-->
5のときのアイコン
<!--{/if}-->

<!--{php}-->
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if($isiPad){
    echo "";
}else{
    echo "<meta name=viewport content=width=1000, initial-scale=0, maximum-scale=1, user-scalable=1 />";
}

ipadのときは　viewport出さないヨという指定です。
結構　うっかりそのままviewport書いてると、ipadでの表示ずれが起きてしまう確率高いので＾＾ｂ

一応iphone取得も書いとこう

$isiPhone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');

クライアントさんから指摘あるまで気にしてなかったのですが、
レスポンシブでメディアクエリで画面幅に沿ってCSS切り替えする際に

@media screen and ～

の記述だと　文字通り　「画面のみ」の表示となってしまうので

<style type="" media="all">

で対応させていても、スルーされます。なんてこったい。

対処方法は

@media print, screen and ～

と書くだけですが、スマホ向けのCSSでも書いてしまうと、
印刷プレビュー時にスマホのレイアウトが出てきてしまうので
基本はPCのみでOKだと思います。

印刷プレビュー　マジであせりました…

メモメモ。説明書くのがメンドイ。
.btnクリックで自分のn番目の値を代入、n番目に該当する.contents_boxまでページ内スクロール！な感じ

 <div id="nav">
  <span class="btn">あああ</span>
  <span class="btn">いいい</span>
  <span class="btn">ううう</span>
 </div>

 <div  class="contents_box">
あああ のとび先
 </div>
 <div  class="contents_box">
いいい のとび先
 </div>
 <div  class="contents_box">
ううう のとび先
 </div>

$(document).ready(function(){
	$(".btn").click(function () {
		var i = $(".btn").index(this)
		var p = $(".contents_box").eq(i).offset().top;
		$('html,body').animate({ scrollTop: p }, 'fast');
		return false;
	});
  });

もはや私の使う定番スライダーとなっている　bxsliderなのですがネックがpagerやナビをクリックした際に動作がとまってしまうことだったんですよね。

前に探したときは探し方が悪く（？）見つからなかったんですが、
やっぱり対処がありました。オプションに。「オプションに」oh…　オプション見てたんですが(悪あがき)

さすがですbxslider様（-人-）ありがたやー。

var foo = $('.bxslider').bxSlider({
onSlideAfter: function () { foo.startAuto(); }
});

というわけでこの部分で対処可能。
引数にbxsliderの設定を代入してコントロール系クリックでスライドさせた後、また自動でスライドさせますよーって感じでしょうか。多分。

実際使うときはこっち

<script>
  $(function(){
var foo = $('.bxslider').bxSlider({
          auto: true,
          pause: 1000,
          speed: 1000,
          onSlideAfter: function () { foo.startAuto(); }
		});
  });
</script>

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のテンプレヘッダに入れて構築すれば一瞬で完了＾＾ｂ
ユーザビリティ的には１番目が良いかな～と思ったり。

<!-- TemplateParam name="testhensu" type="number" value="" -->

●通常

<!-- TemplateBeginIf cond="testhensu == '1'" -->
変数の値が「1」のときの処理
<!-- TemplateEndIf -->

●複数分岐

<!-- TemplateBeginMultipleIf -->
      <!-- TemplateBeginIfClause cond="testhensu == '1'" -->
変数の値が「1」のときの処理
      <!-- TemplateEndIfClause -->
      <!-- TemplateBeginIfClause cond="testhensu == '2'" -->
変数の値が「2」のときの処理
      <!-- TemplateEndIfClause -->
      <!-- TemplateBeginIfClause cond="testhensu == '3'" -->
変数の値が「3」のときの処理
        <!-- TemplateEndIfClause -->
<!-- TemplateEndMultipleIf -->

phpで組まれてるのを置き換えるのは骨が折れますぜー。
ドリウィのテンプレ変数があってよかった。

スマホでgoogle mapを複数埋め込んでtoggleで切り替えてたんですが
diplay:noneになると、地図の表示位置が北極とか表示されて遠すぎやろ！
と思わず関西弁つっこみを入れるこのごろ。

先送りしてたので、いい加減対処しないとなーと思ってぐぐってみても
clickで該当iframeを再読み込みなどがあるのですが、mapが複数ありすぎてちょっと断念。
もっと簡単なのが良いです。

て、ことでvisilityクラスを使ってtoggleClassで切り替えたところ一応できました。
(邪道かもしれない)

<p>タイトル</p>
<div><!--←最初は表示させるタブ-->
ううう
</div>

<p>タイトル２</p>
<div class="hidden">
いいい
</div>

<p>タイトル３</p>
<div class="hidden">
あああ
</div>

.hidden {
	visibility:hidden;
	height:0;
	margin:0;
	padding:0;
	overflow:hidden;
	}

    $(function(){
        $("p").on("click", function() {
            $(this).next().toggleClass("hidden");
            $(this).toggleClass("opn");
            google.maps.event.trigger(map, 'resize');
            map.setCenter(Latlng);
        });

    });

こんな感じです。

            google.maps.event.trigger(map, 'resize');
            map.setCenter(Latlng);

この2行は地図の中心地を再定義するものらしい…（あんまり実感なし）