スマホページにiframeを読み込む場合のheight

Question

お世話になっております。
楽天の商品ページ作成の際、スマホ用の縦長ページを作成するとき、
goldにファイルをアップしiframeで高さを指定しますが、その高さを
どれくらいに設定すればいいのか迷います。

自分のスマホで見た際、ちょうどよく表示されるようにしていますが、
タブレットで見た際はどうなるのでしょうか。

例えばこのページです。
http://item.rakuten.co.jp/morinoen95/mrg0072/

タブレットには、ＰＣ用の画面が表示されるのでしょうか？
よろしくお願いいたします。

Answer

ECマスターズの田中です。

いただいた商品ページに埋め込まれている
https://www.rakuten.ne.jp/gold/morinoen95/smartphone/chichinohi_3100.htm
を確認したところ、
複数の画像が width="100%" に設定の上縦一列に並べられておりました。

これをでページに埋め込むと、
スマートフォンごとの横幅の違いにより高さが異なり、
内容が途中で切れてしまったり、無駄な余白が発生したりします。

丁度良い高さで表示させるには、





上記のように、想定される最低の横幅に合わせて高さをご設定の上、
横幅の広いスマートフォンで閲覧した際は中央揃えで表示されるように
ご設定いただくか、


※任意の数値 は、半角数字に置き換えてください

上記のように、横幅との割合で高さをご設定いただきますようお願いいたします。

＞タブレットには、ＰＣ用の画面が表示されるのでしょうか？
はい、PC用のページが表示されます。

Answer

ご回答ありがとうございます！



は、任意の数値というのはアスタリスクの後に、数字と%で指定するということですよね？

という感じで
1:3の比率の幅ということになりますか？

よろしくお願いいたします。

Answer

ECマスターズの田中です。

＞任意の数値というのはアスタリスクの後に、数字と%で指定するということですよね？

％を入れると計算ができなくなりますので、
数字だけをご記載いただきますようお願いします。

例）


ページの高さと横幅を、下記のような形式でご記載いただいても結構です。
（計算式に利用しますので、pxなどの単位は記載しないようお願いします）


例）


あるいは、縦横の比率がわかっている場合は、
その値を直接、vw単位でご記載いただいても結構です。

例）

Answer

ありがとうございます！試してみます！