【Monaca】Onsen UIの画面内に外部Webページを表示する」の記事において、iOS版のスクロールがうまくいかないと問い合わせが多く、また某サイトでも何度か話題となっており、再度チャレンジしてみました。


今回、Android版・iOS版に関係なく、iframescrollingyesにしました。
iOS版で表示すると、縦スクロールはできますが、下記のように画面の横幅をはみ出してしまいます。

そこで、iframe内に表示されたhtmlbodymax-widthを画面の横幅に設定し直します。
一瞬ちらつく場合がありますが、横幅に収まって表示されます。

ただし、Monacaのサイトの場合、縦スクロールすると表示されるメニュー(画像の赤枠箇所)が表示されませんでした。

iframeの場合

safariの場合

WordPressを利用したブログやホームページを表示する場合、広告などのバナーが貼ってあると、画面の横幅に収まらない場合があります。
また、使用するテーマによっては、レスポンシブの対応がうまく動作しない場合があります。

Amazonギフト券 Eメールタイプ – Amazonベーシック

新品価格
¥5,000から
(2019/10/22 18:00時点)

【Monaca】Onsen UIの画面内に外部Webページを表示する その2
Tagged on: