Googleカレンダーをiframeでホームページで埋め込んだ際のiPhoneだけ右端がはみ出す件

Question

Googleカレンダーをiframeでホームページに埋め込んだ際にiPhoneだけ右端がレスポンシブでwidth:100%を超えてはみ出してしまいます。
対処法をお分かりの方がいらっしゃいましたらご教示ください。
なお、スマホのAndroidははみ出さずに画面におさまっています。

Comments

[TakahiroHayashi]

どのようなHTML、CSSを記述したのか分からないと回答できないので ソースを貼ってもらえますか?、

Answer 1

おそらく<iframe>を囲む<div>いっぱいに表示させる目的で100%;指定なさったのだと思いますが...
同じ状況に遭遇したのですが、%に頼らず、viewport widthを使って具体的に指定してあげたところうまく回避できました。(Safari・Chrome)
私の場合は単純にGoogleカレンダーを《画面幅いっぱいから左右余白を除いた幅》に表示したかっただけでしたので、以下のような具合です。

.calendarDiv iframe {
  width:calc(100vw - 20px);
}

カレンダーを表示させたいエリアや配置によってはここまで簡単に書けないかもしれませんが、ご参考まで。
なお、「計算させるだけで回避できるのかな?」と思い、calc(100%);やcalc(100% + 0px);なども試しましたが、こちらはダメでした。