Q&A
前提・実現したいこと
HTMLソースをjsoupでスクレイピングし、ページの作成をしています。
iframeを使用した際に、iPhone6 IOS11のsafariとchromeで
横幅が100%以上で表示されてしまい、右側に少しはみ出してしまいます。
こちらを画面内に収まるように修正したいです。
ただ、overflow：hiddenではみ出た部分を非表示にするのではなく、
デバイス幅100%で表示させたく思っております。
IOSでiframeの表示がおかしくなることは調べてわかったのですが、
対処法で提案されているものをいくつか試しても解決しませんでした。
何か方法がございましたら、ご教示いただけますでしょうか。
よろしくお願い致します。
該当のソースコード
html
1<div> 2 <iframe> 3 <html> 4 ~略~ 5 </html> 6 </iframe> 7</div>
試したこと
例１. iframeに適当な幅とmax-widthを指定する
css
1iframe { 2 width: 800px;//iphoneの横幅より大きい数値 3 max-width: 100%; 4}
例2. divに横幅を指定し、iframeを100%で表示させる
css
1div { 2 position: fixed; 3 top: 0; 4 left: 0; 5 width: 100%; 6 height: 100%; 7 overflow: auto; 8 -webkit-overflow-scrolling: touch; 9} 10iframe { 11 width: 100%; 12 height: 100%; 13}
上記2例のコードに追加して、
・iframeにdisplay:block;を指定する
・各要素にbox-sizing:border-box;を指定する
・divの横幅を100vwで指定する
等試してみましたが、横幅を100%表示することはできませんでした。
回答1件
0
meta属性でviewportの設定を行ってからvw指定で試して下さい。
投稿2018/04/04 08:59
総合スコア607
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。