🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

Facebook

Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

5407閲覧

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

kentaros

総合スコア8

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

Facebook

Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/03/27 10:55

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

#■実現しようとしてること
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を使用して表示させることも挑戦したのですが、
こちらも携帯端末のみ表示されず。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

CHERRY

2021/03/27 12:00

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

2021/03/28 04:44

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

回答2

0

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


こちらで管理しているサイトの 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

総合スコア25216

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

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

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

投稿2021/11/29 09:41

mojaki

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問