ECCUBE2.11を使っているサイトのスマートフォンにプルダウンメニューを実装するカスタマイズがあり、
jQueryが使えず苦労しましたので備忘録として残します。

正直なところ原因は不明ですが、ECCUBE2.12や2.13で実装していたプルダウンメニューが
2.11だと使えず、jQueryのバージョンをアップすると画面が真っ白になってしまったため、
他の実装方法を探していたところ、cssでのプルダウンを見つけました。

参考サイト
CSSで作ったドロップダウンメニューのドロップの動きいろいろ

HTML

<ul id="normal" class="dropmenu">
  <li><a href="#">menu</a>
    <ul>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
    </ul>
  </li>
  <li><a href="#">menu</a>
    <ul>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
    </ul>
  </li>
  <li><a href="#">menu</a>
    <ul>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
    </ul>
  </li>
  <li><a href="#">menu</a>
    <ul>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
    </ul>
  </li>
  <li><a href="#">menu</a>
    <ul>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
      <li><a href="#">submenu</a></li>
    </ul>
  </li>
</ul>

CSS 共通部分

.dropmenu{
  *zoom: 1;
  list-style-type: none;
  width: 960px;
  margin: 5px auto 30px;
  padding: 0;
}
.dropmenu:before, .dropmenu:after{
  content: "";
  display: table;
}
.dropmenu:after{
  clear: both;
}
.dropmenu li{
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
.dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  background: #8a9b0f;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
.dropmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}
.dropmenu li ul li{
  width: 100%;
}
.dropmenu li ul li a{
  padding: 13px 15px;
  border-top: 1px solid #7c8c0e;
  background: #6e7c0c;
  text-align: left;
}
.dropmenu li:hover > a{
  background: #6e7c0c;
}
.dropmenu li a:hover{
  background: #616d0b;
}

CSSアニメーション無

#normal li ul{
  display: none;
}
#normal li:hover ul{
  display: block;
}

以下のcssはid="normal"のnormalを変更してください。

CSS広がるように
子メニュー１つ１つが広がりながら現れます。

#dropmenu li ul li{
  overflow: hidden;
  height: 0;
  transition: .2s;
}
#dropmenu li:hover ul li{
  overflow: visible;
  height: 38px;
}

CSSフェードイン
マウスを乗せるとふんわりと子メニューが現れます。

#fade-in li ul{
  visibility: hidden;
  opacity: 0;
  transition: 0s;
}
#fade-in li:hover ul{
  visibility: visible;
  opacity: 1;
}
#fade-in li ul li a{
  visibility: hidden;
  opacity: 0;
  transition: .5s;
}
#fade-in li:hover ul li a{
  visibility: visible;
  opacity: 1;
}

CSSフェードインでおりてくる
先ほどと似ていますが、こちらは降りてきます。

#fade-in2 li ul{
  opacity: 0;
  top: 50%;
  visibility: hidden;
  transition: .5s;
}
#fade-in2 li:hover ul{
  top: 100%;
  visibility: visible;
  opacity: 1;
}

CSS左から右へ
子メニューが左側から表示されます。

#left-to-right ul{
  overflow: hidden;
  width: 0;
  transition: .5s;
}
#left-to-right li:hover ul{
  width: 100%;
}
#left-to-right li:hover ul li a{
  white-space: nowrap;
}

参考サイトはグローバルメニューを想定していますが、
今回はヘッダーのプルダウンメニューに使ったので、CSSを調整して実装できました。

問題点としては、スマホでタップすると開きますが、タップで閉じません。
メニューボタン以外の箇所をタップするか、メニューを選択すると閉じます。
その点だけを考慮すれば、jQueryが古くてプルダウンのjsが使えない場合など、
有効活用できるかと思います。

個人で、食！相模原というサイトを制作・運営しています。

PCはいいのですが、スマホでGoogle Mapを表示したときに、
スワイプで地図が動いてしまうのが問題だなと思い、
Google Mapのスクロールを無効にする修正をしました。

参考サイト
Googleマップの上でのスクロール動作を無効にする

いろいろと検索したところ、
apiの修正は結構ヒットするのですが、
肝心のiframeでの修正方法が見つからず、
「Google Map iframe スクロール無効」でやっと見つかったのが下記のサイトです。

上記のサイトを参考に、
iframeの記述の中に「style="pointer-events:none;"」を追加しました。

<div id="gmap">
    <iframe width="630" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?q=<?php echo get_post_meta($post->ID,'shop_address',true); ?>&amp;z=14&amp;output=embed" style="border:0;pointer-events:none;"></iframe>
</div>

しかし、適用してみるとPCも固定化されてしまいました。

そこで、CSSで指定することにしました。

解像度769px以下の場合（タブレット）、gmapのiframeで適用することに。

@media screen and (max-width: 769px) {
    #gmap iframe{
        pointer-events:none;
    }
}

これで、PCの場合はGoogle Mapのスクロールが有効になりました。

備忘録です。

電話番号にリンクをつける場合、

<a href="tel:000-0000-0000">000-0000-0000</a>

ですが、
これですと、PCでもリンクがついてしまいます。

レスポンシブデザインでスマホのみリンクを有効にするためのjavascriptです。

//スマホ電話番号リンク
$(function() {
    if (!isPhone())
        return;

    $('span[data-action=call]').each(function() {
        var $ele = $(this);
        $ele.wrap('<a href="tel:' + $ele.data('tel') + '"></a>');
    });
});

function isPhone() {
    return (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0);
}

このjavascriptを使うことにより、デバイスでスマートフォンの場合のみ、
電話番号のリンクが有効になります。

しかし、競合するjQueryがあり、場合によっては使えないことがあります。
その場合、別の方法で対応することにしました。

参考サイト
レスポンシブのサイトでスマホの時だけtelリンクを有効にする

WordPressの場合には、head～/headまたは任意のファイルに貼り付け

function smtel(telno){
    if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 0 ){
        document.write('<a class="tel-link" href="tel:'+telno+'">'+telno+'</a>');
        }else{
        document.write('<span class="tel-link">'+telno+'</span>');
    }
}

【html】

<p>
お問い合わせ：<script type="text/javascript">smtel('00-0000-0000');</script>
</p>

この方法なら、jQuryの競合を気にしなくても大丈夫です。

Androidの標準ブラウザのみposition:fixedが効かないことがわかり修正をしました。

参考サイト
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ

比較的修正は簡単で、viewportにuser-scalable=noを追加するだけです。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

ヘッダーや「トップに戻る」などをposition:fixedにしていますので、
これで無事解決しました。

しかし、問題点があります。
ser-scalable=yesになっている場合、ピンチイン、ピンチアウトで画面の拡大縮小ができるのですが、
ser-scalable=noにするとピンチイン、ピンチアウトが使えなくなります。

この問題については、下記サイトを参考にしました。
user-scalable=noを使う理由と弊害（スマホのviewportを見直す）

他にいい対応策がないか考えてみたいと思います。

スマホサイトでピンチによる拡大については考えていなかったので、
対応、非対応については、対応できない形で制作をしていましたが、
クライアントさんからの要望で拡大できるようにしました。

参考サイト
viewportの書き方でピンチによる拡大・縮小ができるのがいいのかできないのがいいのか

<head>～</head>にどちらかを書きます。

ピンチによる拡大・縮小ができない
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
ピンチによる拡大・縮小ができる
<meta name="viewport" content="width=device-width,initial-scale=1.0">

上記参考サイトでcssの指定もあったので追加

body {
  -webkit-text-size-adjust: 100%;
}

上記のCSSについては
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
も参考にしました。