Monacaでiframeを用いて、iOSでもWebページをそのまま表示するアプリを作りたい

質問内容

Monacaにてを作っています、Webページをそのまま表示するアプリを作ろうとしています。

iOS版にて、iframeを用いて画面を表示させようとすると、画面が崩れる or スクロールできず完璧な表示ができません。

質問の経緯

シンプルにiframeを用いて、Android版は簡単に表示することができたのですが、

iOSは、画面がPCサイズのもが表示されたり、
大きく崩れたりしました。

ここ１週間ありとあらゆる方法を試して失敗し、相談することになりました。

国内外のサイトをみて、世界中の人のアプローチをまとめてくれたようなサイトが以下です（こちらは全て試したものの、画面が崩れて、PC版のような表示になる）。

https://mamewaza.com/support/blog/iframe-scrolling-on-ios.html

唯一、以下のURLを参考にAngularJとOnsenUIで作成した時のみ、綺麗に表示されたのですが、今度はスクロールできず。。。

http://hatopp.wpblog.jp/archives/1297

###現在の状態
Monaca(https://ja.monaca.io/)の「最小限のテンプレート」を使ったものです。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script>
11    </script>
12</head>
13<body>
14<div class="type5"><iframe src="http://~~~~" frameborder="0"></iframe></div>　	
15</body>
16</html>

CSS
1.type5 {
2    position:fixed;
3    left:0;
4    top:0;
5    width:100%;
6    height:100%;
7    overflow: auto;
8    -webkit-overflow-scrolling:touch;
9}
10
11.type5 iframe {
12    width:100%;
13    height:100%;
14}

様々な方法試しましたが、どれもうまくいかずに途方に暮れています。
プログラミングのレベルは、初心者に毛が生えた程度です。

先輩の方々、どうか助けてください。
何卒、よろしくお願い致します。

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

回答1件

私も過去に同じような経験があるのでご参考に回答いたします。
iframeでは上手くいかなかったので、「cordova.InAppBrowser」でWebページを表示するようにして解決しました。

iframeを使うのが必須でしたらこれは使えないですが、単純にWebページを画面いっぱいに表示するなら以下の例をご参考いただければと思います。

// ブラウザオープン
browser = cordova.InAppBrowser.open(url, '_blank', 'location=no,toolbar=yes,closebuttoncaption=再読込み');
// 読込み開始時の処理
browser.addEventListener('loadstart', browserLoadstart);
// 読込み完了時の処理
browser.addEventListener('loadstop', browserLoadstop);
// エラー時の処理
browser.addEventListener('loaderror', browserLoaderror);
// 終了時の処理
browser.addEventListener('exit', browserExit);

投稿2019/12/13 02:51