ブレイントラスト EC LEARNING(ec・ラーニング)

ビギナーにも使えるヒントが満載。 ネットショップコンサルのプロがノウハウをお届け。

開店構築費5万円、最短5	営業日で完成! ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング
スマホにiframeを読み込んだのですが、機種によっては途中で切れてしまいます。どうすれば切れずに表示されますか?

スマホにiframeを読み込んだのですが、機種によっては途中で切れてしまいます。どうすれば切れずに表示されますか?

スマ-トフォンの場合、機種によってブラウザの幅が違うためにこのような現象が起きてしまいます。
表示が切れている場合はiframeの高さが足りていないので、cssの「メディアクエリ」を利用して、ブラウザの幅に合わせて個別にiframeの高さを設定してあげるといいでしょう。
4パターン記載すればほぼすべてのスマートフォンのブラウザに対応することができます。(縦向きの場合) 下記cssの記載例です。(●●●●がiframeのclassまたはid、■■■■はiframeの高さ)

/* メディアクエリの範囲外には幅320pxの際のiframeの高さを記載(iphone5など) */
.●●●● {width: 100%;height: ■■■■px;}

/* 幅360px以上(一部のandroidのブラウザ向け) */
@media screen and (min-width: 360px) {
.●●●● {height: ■■■■px;}
}

/* 幅375px以上(iphone6,iphone7など) */
@media screen and (min-width: 375px) {
.●●●● {height: ■■■■px;}
}

/* 幅414px以上(iphone6 Plus,iphone7 Plusなど) */
@media screen and (min-width: 414px) {
.●●●● {height: ■■■■px;}
}