スマホ閲覧時の表示について

Question

お世話になっております。
昨年、スマホでiframeを読み込むときについてお伺いいたしました。

そちらで設定しているのですが、いまいちわからない部分があります。
現在、以下のように設定しています。
以下の設定が横と縦の比率が1:16だと認識していますが、違うのでしょうか。



100vwとはどういう意味なのでしょうか。
宜しくお願い致します。

Answer

ECマスターズの田中です。

「vw」は画面横幅に対する割合を示す単位で、
100vwで画面横幅の100%、つまり画面横幅と同じサイズを示します。

いただいたソースのiframeが画面横幅いっぱいに表示されている場合、
横幅が100vw相当、高さが1600vwとなりますので、
横と縦の比率は、おっしゃる通り1:16となります。
（※6/5 19:38 正しい内容に修正させていただきました）

Answer

お世話になっております。ご回答ありがとうございます。

以下のページは、下のように組み立てています。
https://item.rakuten.co.jp/morinoen95/1470100tokuyou-ss/?force-site=ipn

希少で上質な茎の部分を、丹念に二度焙煎しじっくり中まで火を通しました。ほっと安らげる、大人の上質ティータイムをお届けいたします。




おっしゃった法則ですと、7:1で横幅に対し、縦がとても短いページになると
思うのですが、実際表示させてみると、横幅より縦の方が長いページを読み込むことができています。
（多少、読み込めていない部分があるのですが）
この場合、１４でなく、なんと入力すればよいのでしょうか。宜しくお願い致します。

Answer

ECマスターズの田中です。

大変失礼いたしました、
最初の返信内容に誤りがございました。

> 以下の設定が横と縦の比率が1:16だと認識していますが、違うのでしょうか。
横幅が100vw相当、高さが16vwではなく1600vwになりますので、
おっしゃるとおり、1:16で正しい状態となります。
なお、calc(100vw *16) ではなく、直接 1600vw とご記載いただいても結構です。
こちらの件、元の返信内容も修正を行わせていただきます。

いただいたソースの場合も、
14で足りない場合は多少増減していただいて結構です。
calc(100vw *14);の代わりに 1400vw とご記載の上、
細かく増減していただいても結構です。

なお、iPhoneで閲覧した場合、
高さの指定にかかわらず、GOLDのHTMLファイルの内容が
全て表示される仕様となっておりますので、
予めお含みおきください。
（AndroidまたはPCで閲覧時の高さは、数字による指定が必要となります）

Answer

田中さま

ご返信頂きありがとうございました。
納得いたしました。

iphoneで閲覧した場合は、高さの指定に関わらずGOLDの内容が全て
表示されるのですね。

教えて頂きありがとうございました！