スマートフォン用商品説明文(rakuten)

Question

お世話になります

下記ソースを入れようと思ってますがレイアウトが整いません。
教えていただけますでしょうか？

pcバージョンは(正しく表示)
↓


spは、レイアウト崩れ
↓

Answer

ECマスターズの田中です。

今回ご質問いただいたツールは、
PC向けに、固定サイズで表示することのみを想定されているため、
iframeのサイズを変更しても、
内容のサイズは変わらず、崩れて表示されてしまいます。

スマートフォンで表示する場合は、
JavaScriptとスタイルシートを活用して、
画面幅に併せて縮小処理を行う必要がございます。

スマートフォン用タグとして、下記をご利用ください。

= この下の行から ====================

jQuery(function($){
$('.iFrameOsusume').each(function(){
var pdv = $(this),ifr = pdv.find('iframe');
var divw = pdv.width(), ifrw = parseInt(ifr.attr('width')), ifrh = parseInt(ifr.attr('height'));
ifr.css({ transform: 'scale(' + Math.floor( (divw / ifrw) * 1000 ) / 1000 + ')', transformOrigin: '0 0' });
pdv.css({ height: divw * ifrh / ifrw });
});
});




= この上の行まで ====================

Answer

田中さま

お世話になります。
うまく表示されました。以前も、お聞きしたカモしれませんが・・
楽天アプリ表示崩れてしまうのは仕方ないんですよね？

Answer

ECマスターズの田中です。

> 楽天アプリ表示崩れてしまうのは仕方ないんですよね？

アプリ内でjQueryが読み込まれていないことが原因であり、
jQueryを使わない方法に変えることで改善できることがわかりました。

前回のソースの代わりに、下記ソースをご利用いただきますようお願いします。

= この下の行から ====================

addEventListener("DOMContentLoaded", function(){
  document.querySelectorAll(".iFrameOsusume").forEach(function(pdv){
    var ifr = pdv.firstElementChild;
    var divw = pdv.clientWidth;
    var ifrw = ifr.clientWidth;
    var ifrh = ifr.clientHeight;
    ifr.style.transform = 'scale(' + Math.floor( (divw / ifrw) * 1000 ) / 1000 + ')';
    ifr.style.transformOrigin = '0 0';
    pdv.style.height = Math.floor(divw * ifrh / ifrw) + 'px';
  });
});




= この上の行まで ====================

Answer

田中さん

お世話になります。

前回のソースの代わりに、下記ソースをご利用いただきますようお願いします。
↑
やってみたのですが、スマホは完全表示・アプリでは全く表示されない、ようになりました。
引き続きよろしくお願いいたします

Answer

ECマスターズの星です。

週明け担当よりご連絡さしあげますので、
今しばらくお待ちいただけると幸いです。
何卒よろしくお願いいたします。

Answer

ECマスターズの田中です。

弊社のテスト環境にて、
ご案内差し上げたソースを貼り付けたところ、
Web・アプリ、共に問題なく表示されました。

問題解決のため、実際の表示を確認させていただきたいので、
任意の商品ページにご設置いただいた上で、
設置されたページのURLをお知らせいただきますようお願いいたします。

Answer

田中さん

お世話になります。
何故でしょうかね？

スマホアプリ(android 7.1.2です)では、全く表示されないんです

https://item.rakuten.co.jp/mekin-hiroba/10000028/

Answer

ECマスターズの田中です。

> スマホアプリ(android 7.1.2です)では、全く表示されないんです

失礼しました、Android機にて、
確かに表示されないことを確認いたしました。
つきましては、下記ソースでお試しいただきますようお願いします。

= この下の行から ====================


var _j = jQuery.noConflict();
_j(function($){
$('.iFrameOsusume').each(function(){
var pdv = $(this),ifr = pdv.find('iframe');
var divw = pdv.width(), ifrw = parseInt(ifr.attr('width')), ifrh = parseInt(ifr.attr('height'));
ifr.css({ transform: 'scale(' + Math.floor( (divw / ifrw) * 1000 ) / 1000 + ')', transformOrigin: '0 0' });
pdv.css({ height: divw * ifrh / ifrw });
});
});




= この上の行まで ====================

Answer

田中さん

ありがとうございます(^^)
アプリも、表示されるようになりました。スゴイッ!
カラー・サイズなど表示できるようになり、商品ページ内で、違う商品も案内でき回遊が高まればと思います。