カテゴリー別アーカイブ: スマホ

EC-CUBEでスマホ切り替えとかいらない場合

EC-CUBEはスマホでアクセスした場合自動でテンプレートがスマホ用に切り替わりますが、PCサイトをレスポンシブにしてたり、スマホでもPCサイトで見せたかったりする場合の対処方法。

【data/class/SC_Display.php】を編集

▼140行目あたり

    /**
     * 端末種別を判別する。
     *
     * SC_Display::MOBILE = ガラケー = 1
     * SC_Display::SMARTPHONE = スマホ = 2
     * SC_Display::PC = PC = 10
     *
     * @static
     * @param          $reset boolean
     * @return integer 端末種別ID
     */
    public static function detectDevice($reset = FALSE)
    {
        if (is_null(SC_Display_Ex::$device) || $reset) {
            $nu = new Net_UserAgent_Mobile();
            $su = new SC_SmartphoneUserAgent_Ex();
            if ($nu->isMobile()) {
                SC_Display_Ex::$device = DEVICE_TYPE_MOBILE;
            } elseif ($su->isSmartphone()) {
                SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE;
            } else {
                SC_Display_Ex::$device = DEVICE_TYPE_PC;
            }
        }

↑ここで振り分けが行われているので、全部PC版で見せるなら
▼こんな感じにいらない部分をコメントアウト(//)しちゃう。

    /**
     * 端末種別を判別する。
     *
     * SC_Display::MOBILE = ガラケー = 1
     * SC_Display::SMARTPHONE = スマホ = 2
     * SC_Display::PC = PC = 10
     *
     * @static
     * @param          $reset boolean
     * @return integer 端末種別ID
     */
    public static function detectDevice($reset = FALSE)
    {
        if (is_null(SC_Display_Ex::$device) || $reset) {
            $nu = new Net_UserAgent_Mobile();
            $su = new SC_SmartphoneUserAgent_Ex();
//           if ($nu->isMobile()) {
//                SC_Display_Ex::$device = DEVICE_TYPE_MOBILE;
//            } elseif ($su->isSmartphone()) {
//                SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE;
//            } else {
                SC_Display_Ex::$device = DEVICE_TYPE_PC;
//            }
        }

これでOK。

 

 

iphone版Chromeだけクリッカブルマップがきかない

クリッカブルマップでareaをクリックしたらモーダルが開いて・・・てなページを作成し、 各機種で検証したところ、【iphoneのChrome】でのみ!動かない~~~!!!

iPhoneのSafariやAndroidのブラウザではうまくいっているし、PCのChromeでも問題ないのにっ!!

てなことがあり、解決したので残しとく。

jQueryの書き方とかいろいろ試したけど、結局原因は以下でした。

imgに幅と高さが指定されていない

これだけでした。

レスポンシブでCSSで幅を100%とかにしているため、画像自体には特に幅・高さを入れなかったのが原因。

▼以下がダメコード

<img alt="クリッカブルマップ" src="/images/areamap.jpg" usemap="#hoge" />
<map id="hoge" name="hoge">
<area alt="りんご" coords="435,193,39" shape="circle" href="#" />
<area alt="みかん" coords="369,296,38" shape="circle" href="#" />
<area alt="いちご" coords="295,337,38" shape="circle" href="#" />
</map>

それがimgにちゃんと幅と高さを入れるだけで解決
▼以下が正解コード

&lt;img src="/images/areamap.jpg" alt="クリッカブルマップ" usemap="#hoge" width="500" height="600"&gt;
&lt;map id="hoge" name="hoge"&gt;
  &lt;area shape="circle" coords="435,193,39" href="#" alt="りんご"&gt;
  &lt;area shape="circle" coords="369,296,38" href="#" alt="みかん"&gt;
  &lt;area shape="circle" coords="295,337,38" href="#" alt="いちご"&gt;
&lt;/map&gt;<map id="hoge" name="hoge">  </map>

これで解決です!