前提・実現したいこと
monacaを用いてアプリを作っています。アプリ上でiframeでWIXで作成したwebサイトを表示させるのですが、左右に必ず余白ができてしまいます。CSSの部分を100%からピクセル数字に変えてもiframeで表示したものが左端に寄ってしまい右に余白ができてしまいます。どうしたら余白ができずに、iframeで表示したものを画面いっぱいに表示することができますか?
WIXで作成したwebサイトのスマホ対応化?
発生している問題・エラーメッセージ
アプリ上でiframeでWIXで作成したwebサイトを表示させると、左右に必ず余白ができてしまいます。CSSの部分を100%からピクセル数字に変えてもiframeで表示したものが左端に寄ってしまい右に余白ができてしまいます。
該当のソースコード
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, viewport-fit=cover"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 <script> 16 ons.ready(function() { 17 console.log("Onsen UI is ready!"); 18 }); 19 20 document.addEventListener('show', function(event) { 21 var page = event.target; 22 var titleElement = document.querySelector('#toolbar-title'); 23 24 if (page.matches('#first-page')) { 25 titleElement.innerHTML = 'a'; 26 } else if (page.matches('#second-page')) { 27 titleElement.innerHTML = 'i'; 28 } 29 }); 30 31 if (ons.platform.isIPhoneX()) { 32 document.documentElement.setAttribute('onsflag-iphonex-portrait', ''); 33 document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); 34 } 35 ons.disableAutoStatusBarFill(); 36 </script> 37</head> 38<body style="margin:auto 0;padding:auto 0;"> 39 <ons-page> 40 <ons-toolbar> 41 <div class="center" id="toolbar-title"></div> 42 </ons-toolbar> 43 <ons-tabbar position="auto"> 44 <ons-tab label="a" page="tab1.html" active> 45 </ons-tab> 46 <ons-tab label="b" page="tab2.html"> 47 </ons-tab> 48 </ons-tabbar> 49 </ons-page> 50 51 <ons-template id="tab1.html"> 52 <ons-page id="first-page"> 53 <iframe src="サイトURL" seamless></iframe> 54 </ons-page> 55 </ons-template> 56 57 <ons-template id="tab2.html"> 58 <ons-page id="second-page"> 59 <p style="text-align: center;"> 60 This is the second page. 61 </p> 62 </ons-page> 63 </ons-template> 64</body> 65</html>
CSS
1 html,body{ 2 width:100%; 3 height:100%; 4 padding:0; 5 margin:0; 6 } 7 8 iframe{ 9 width:100%; 10 height:100%; 11 padding:0; 12 margin:0; 13 border:0; 14 } 15
試したこと
コード中のサイト名に自分のオリジナルサイトがはいるのですができませんでした。別のサイトで試したところ成功したさいともあったためスマホに対応しているといいのかなとも思いました。オリジナルサイトはWIXでつくりました。
補足情報(FW/ツールのバージョンなど)
サイトはWIXで作りました。
Oncen UIも使用しました
あなたの回答
tips
プレビュー