イベント告知君(R)スマホ用の横表示で画像が切れてしまう

Question

いつもお世話になっております。

イベント告知君(R)スマホ用をスマホの商品ページ共通説明文へ設置しました。
クロームのテスト環境だとうまく表示出来るのですが、
実際のスマホで横に表示させると下側の画像が切れてしまいます。
表示させる方法はありますでしょうか？###HR######IMG07fa9a98f58007ee3d6c2b5442ab7a4df.pngIMG0###

Answer

ECマスターズの田中です。

高さを調整することで、表示させることができると思いますので、
設置用タグの中に含まれております、
calc( 9.5vw + 50px )
の数字を、たとえば
calc( 12.5vw + 50px )
のように増やしていただき、表示をご確認いただけますでしょうか。

Answer

田中様

早速ご返答ありがとうございます。
数字を変更してみましたが、余白のみ大きくなったようで
画像は同じ所で切れてしまっています。

ちなみにこちらのスマホはiPhoneSEでクロームでも、サファリでも同じ症状が出ます。
横画面にして再読込した場合のみキレイに表示されます。###HR######IMG09035f10207b7038f1a3cbc5271265f4b.pngIMG0######BR###

Answer

ECマスターズの田中です。

それでは、私にて症状を確認させていただきますので、
実際にイベント告知君を設置した商品ページをご用意の上、
（サーチ非表示に設定した、ダミーの商品ページで結構です）
その様子が確認できるURLをお知らせいただけますでしょうか。

ショップURLの部分は伏せていただいて構いません。
フォーラムにてご返信いただき辛い場合は、リクエストフォームよりお知らせください。

Answer

ダミーの商品ページを作成しましたので
ご確認いただけますでしょうか？
よろしくお願いいたします。

https://item.rakuten.co.jp/ショップURL/test/

Answer

ECマスターズの田中です。

ダミーページをご用意いただきありがとうございます。
私にて確認したところ、
縦表示していたページを横に回転したところ、おっしゃる通りの現象が発生し、
最初から横表示の状態でページを読み込むと、正常に表示されました。

ページ読み込み時に、スライダーの仕組みを作成するJavaScriptが
画面の横幅を計って各パーツを配置するため
このような動作になっているものと思いますが、
nishiさんの環境でも、最初から横表示の状態でページを読み込むと
正常に表示されますでしょうか。
それとも、再読み込みした場合のみ正常でしょうか。

Answer

ご確認ありがとうございます。
最初から横表示で読み込んだ場合は正常に表示されました。
ではタブレットなどで見た場合は正常に表示出来ているということですね。
よかったです。

スマホで途中から横表示に変えることはほとんど無いと思いますが、
この場合の対処法はないでしょうか？
タブレットでも途中から横にすると途切れてしまうでしょうか？

Answer

ECマスターズの田中です。

＞ではタブレットなどで見た場合は正常に表示出来ているということですね。

基本的に、タブレットのブラウザで楽天のページを開くと
PC向けの見た目で表示されますが、
タブレットでスマートフォン用ページを見た場合でも
正常に表示できていると認識していただいて結構です。

＞スマホで途中から横表示に変えることはほとんど無いと思いますが、
＞この場合の対処法はないでしょうか？

こちらは、スライダーを作成する仕組みに関する問題であり、
対処するには、弊社にて原因を探り、修正する必要がございます。
もし、修正方法が見つかりましたら、
修正完了したバージョンを利用中の全店舗へ公開した上で、
会員の皆様へのお知らせをもってご案内させていただきます。

Answer

ありがとうございました。
それでは改善の報告をお待ちしております。
よろしくお願いいたします。