###発生してる問題
レスポンシブ対応でテキストエリアのデザインが横にはみ出てしまいます。
ifreneで外部LPサイトを埋め込みをしています。
androidでははみ出ないですが、iphone5s以降の画面で表示するとフォームのデザインが崩れています。
###前提・実現したいこと
レスポンシブ対応でテキストエリアが横にはみ出ないようにしたいです。
###htmlは以下のように組んでいます。
<!DOCTYPE html> <!-------- ▼変更しないでください▼ --------> <html lang="ja"> <head> <meta charset="utf-8"> <title>Curebo</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="robots" content="noindex,nofollow,noarchive"> <link rel="icon" type="image/vnd.microsoft.icon" href="./images/icon/16.ico" sizes="16×16"> <link rel="icon" type="image/vnd.microsoft.icon" href="./images/icon/32.ico" sizes="32x32"> <link rel="icon" type="image/vnd.microsoft.icon" href="./images/icon/48.ico" sizes="48x48"> <link rel="icon" type="image/vnd.microsoft.icon" href="./images/icon/128.ico" sizes="128x128"> <link rel="apple-touch-icon" href="../images/icon/curebo_touch_icon.png"> <link rel="stylesheet" href="style.css"> <script src="./js/jquery-1.12.4.min.js"></script> <script src="./js/script.js"></script> <script src="./js/jquery.scrolldepth.min.js"></script> </head> <body> <!-- インクルード --> <div id="frame_area"> <iframe src="https://lp.cola100.jp/afc29_sp_8100n?affId=2_1492516872_f7h3lex5NFwTILWJ"></iframe> </div> <!-- iframe hight調整 --> <script> $('iframe') .on('load', function(){ try { $(this).height(this.contentWindow.document.documentElement.scrollHeight); } catch (e) { } }) .trigger('load'); </script> </body> </html> ###cssは以下のように対応しています
cssは以下のように対応しています
#frame_area { width: 100%; height: 100%; } iframe { border: 0; width: 100%; height: 100%; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。