小さな会社のためのECサイトプロデュース|ブレイントラスト
  • Yahoo!コマースパートナーBest Store Awards 2020特別賞
  • Yahoo!コマースパートナー認定

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

no image

スマ-トフォンの場合、機種によってブラウザの幅が違うためにこのような現象が起きてしまいます。
表示が切れている場合は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;}