facebookをiframeで埋め込んだときに　携帯端末で表示されない

明日中に解決しなければならず、
ご回答いただける方には本当に感謝申し上げます。

#■実現しようとしてること
facebookの画面をサイト内で表示させるために、iframeで現在実装しております。

#■起こっている問題
携帯端末でiframe部分が真っ白になって表示されない

####▼条件
・パソコンで携帯画面幅にすると表示される
・もちろんパソコン画面では表示される
・携帯端末での検証はsafariで行っている
・携帯端末はiphoneXR
・pcのsafariでも表示される

html
1           <div class="foot1_bottom">
2
3            <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fdawncafe2021&tabs=timeline&width=400&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="400" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
4
5           </div>

css
1/* これはレスポンシブのcssです。 */
2
3.foot1_bottom {
4  width: initial;
5  display: flex;
6  justify-content: center;
7}
8  .foot1_bottom iframe {
9    width: 47vw;
10    height: 47vw;
11    margin:0 auto;
12}

いろいろ試したのですが、
表示されず。。。

javascriptのSDKを使用して表示させることも挑戦したのですが、
こちらも携帯端末のみ表示されず。。

CHERRY

2021/03/27 12:00

iframe のsrcのURL を iOS のサファリのアドレスバーに直接入力すると表示されますか？

kentaros

2021/03/28 04:44

ご連絡ありがとうございます。通常通り表示されます。。。

行動規範の内容に同意します

回答2件

回答ではありませんが、デバッグ方法について...

こちらで管理しているサイトの facebook 埋め込みは iOS の Safari では問題が出ていないようです。

また、質問に記載されているコードをもとに適当なHTMLファイル・CSSを作成して表示した場合も問題なく表示できているように思えます。

おそらく、質問には記載されていない HTML や CSS 、 JavaScript 部分で問題が生じているのではないかと思われます。

お手元に Mac があるのであれば、実機iPhoneのSafariでWebインスペクタを使ってデバッグする方法の様に設定することで、 Mac 上 Safari を使用して iOS 実機で表示している画面のソースが確認できると思いますので、確認するとコンソールになにか表示されていたりしないでしょうか。

投稿2021/11/29 11:03

編集2021/11/29 11:12

CHERRY

総合スコア25171

はじめまして。
実は私も同じ現象に悩まされています。

いろいろと試いしてみましたが、どうやらiOSとSafariの組み合わせで起きる問題のようです。
手持ちのiPhoneやiPadとSafariの組み合わせで同現象が発生します。
いずれも最新のiOS（iPad OS）で使用しています。
同端末でGoogle Chromeで確認したところ問題は発生しません。

古いiPhoneやiPad（iOS12）では問題なく表示されます。

というわけで、私はAppleが対応してくれるかしばらく様子を見ようと思っています。

何の解決にもならず申し訳ありませんが、ご参考まで。

投稿2021/11/29 09:41